/*
 * DoFundraise — Design Tokens
 * public/assets/css/tokens.css
 *
 * All CSS custom properties for the design system.
 * Import this first; all other stylesheets depend on these tokens.
 *
 * Responsive breakpoints (for use in media queries):
 *   sm:  640px
 *   md:  768px
 *   lg: 1024px
 *   xl: 1280px
 */

:root {
    /* ── Color palette ───────────────────────────────────────────────────── */
    --color-brand:          #2563eb;
    --color-brand-dark:     #1d4ed8;
    --color-brand-light:    #dbeafe;
    --color-brand-text:     #1e40af;

    --color-accent:         #16a34a;
    --color-accent-dark:    #15803d;
    --color-accent-light:   #dcfce7;

    /* Neutrals */
    --color-bg:             #f8fafc;
    --color-surface:        #ffffff;
    --color-surface-raised: #f1f5f9;
    --color-border:         #e2e8f0;
    --color-border-strong:  #cbd5e1;

    /* Text */
    --color-text:           #0f172a;
    --color-text-soft:      #334155;
    --color-muted:          #64748b;
    --color-subtle:         #94a3b8;

    /* Semantic states */
    --color-success:        #16a34a;
    --color-success-bg:     #dcfce7;
    --color-success-border: #bbf7d0;

    --color-warning:        #ca8a04;
    --color-warning-bg:     #fef9c3;
    --color-warning-border: #fef08a;

    --color-danger:         #dc2626;
    --color-danger-bg:      #fee2e2;
    --color-danger-border:  #fecaca;

    --color-info:           #0284c7;
    --color-info-bg:        #e0f2fe;
    --color-info-border:    #bae6fd;

    /* ── Typography ──────────────────────────────────────────────────────── */
    --font-sans:            system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:            ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;

    --font-size-xs:         0.75rem;    /* 12px */
    --font-size-sm:         0.875rem;   /* 14px */
    --font-size-base:       1rem;       /* 16px */
    --font-size-lg:         1.125rem;   /* 18px */
    --font-size-xl:         1.25rem;    /* 20px */
    --font-size-2xl:        1.5rem;     /* 24px */
    --font-size-3xl:        1.875rem;   /* 30px */
    --font-size-4xl:        2.25rem;    /* 36px */
    --font-size-5xl:        3rem;       /* 48px */

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-extrabold:800;

    --line-height-tight:    1.25;
    --line-height-snug:     1.375;
    --line-height-normal:   1.5;
    --line-height-relaxed:  1.625;
    --line-height-loose:    2;

    /* ── Spacing ─────────────────────────────────────────────────────────── */
    --space-1:  0.25rem;    /* 4px  */
    --space-2:  0.5rem;     /* 8px  */
    --space-3:  0.75rem;    /* 12px */
    --space-4:  1rem;       /* 16px */
    --space-5:  1.25rem;    /* 20px */
    --space-6:  1.5rem;     /* 24px */
    --space-8:  2rem;       /* 32px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */
    --space-16: 4rem;       /* 64px */
    --space-20: 5rem;       /* 80px */
    --space-24: 6rem;       /* 96px */

    /* ── Border radius ───────────────────────────────────────────────────── */
    --radius-sm:   0.25rem;
    --radius:      0.5rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.5rem;
    --radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────────────────────────── */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, .05);
    --shadow:     0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-md:  0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .05);
    --shadow-lg:  0 10px 15px rgba(0, 0, 0, .07), 0 4px 6px rgba(0, 0, 0, .05);
    --shadow-xl:  0 20px 25px rgba(0, 0, 0, .07), 0 10px 10px rgba(0, 0, 0, .04);

    /* ── Layout ──────────────────────────────────────────────────────────── */
    --container-max:    1120px;
    --container-narrow:  720px;
    --container-wide:   1360px;
    --header-height:    3.75rem;

    /* ── Transitions ─────────────────────────────────────────────────────── */
    --transition-fast: 100ms ease;
    --transition:      150ms ease;
    --transition-slow: 250ms ease;
}