/* ============================================================================
 * Arcpoly Theme — Design Tokens
 * Single source of truth cho colors, typography, spacing, motion, shadows.
 * Mọi component CSS PHẢI reference qua var(--*), không hardcode value.
 * ========================================================================== */

@layer tokens {

:root {
    /* ===== COLOR — Surface ===== */
    --c-bg-0:        #0a0a0a;   /* deepest — page background */
    --c-bg-1:        #141414;   /* card / container */
    --c-bg-2:        #1f1f1f;   /* raised — modals, hover */
    --c-bg-3:        #2a2a2a;   /* highest — popovers, dropdowns */

    --c-border:      #262626;   /* default border */
    --c-border-hi:   #3a3a3a;   /* high-contrast border (focus) */
    --c-divider:     rgba(255,255,255,0.06);

    /* ===== COLOR — Text ===== */
    --c-text:        #ececec;
    --c-text-dim:    #a3a3a3;
    --c-text-muted:  #6b6b6b;
    --c-text-on-brand: #ffffff;

    /* ===== COLOR — Brand ===== */
    --c-brand:        #f54d2d;
    --c-brand-hover:  #ff6440;
    --c-brand-active: #d63d20;
    --c-brand-soft:   rgba(245, 77, 45, 0.12);   /* tint background */
    --c-brand-ring:   rgba(245, 77, 45, 0.30);   /* focus ring */

    /* ===== COLOR — Status ===== */
    --c-success:      #22c55e;
    --c-success-soft: rgba(34, 197, 94, 0.12);
    --c-warning:      #f59e0b;
    --c-warning-soft: rgba(245, 158, 11, 0.12);
    --c-danger:       #ef4444;
    --c-danger-soft:  rgba(239, 68, 68, 0.12);
    --c-info:         #3b82f6;
    --c-info-soft:    rgba(59, 130, 246, 0.12);

    /* ===== TYPOGRAPHY ===== */
    --ff-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --ff-body:    var(--ff-display);
    --ff-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* Font sizes — fluid scale (clamp min/preferred/max) */
    --fs-xs:   0.75rem;     /* 12 */
    --fs-sm:   0.875rem;    /* 14 */
    --fs-base: 1rem;        /* 16 */
    --fs-lg:   1.125rem;    /* 18 */
    --fs-xl:   1.25rem;     /* 20 */
    --fs-2xl:  clamp(1.25rem,  1.1vw + 1rem,    1.5rem);    /* 20→24 */
    --fs-3xl:  clamp(1.5rem,   1.4vw + 1.1rem,  2rem);      /* 24→32 */
    --fs-4xl:  clamp(1.875rem, 2.2vw + 1.2rem,  2.5rem);    /* 30→40 */
    --fs-5xl:  clamp(2.25rem,  3vw + 1.4rem,    3.5rem);    /* 36→56 */
    --fs-6xl:  clamp(2.75rem,  4vw + 1.6rem,    4.5rem);    /* 44→72 */

    /* Line heights */
    --lh-tight:   1.15;
    --lh-snug:    1.3;
    --lh-normal:  1.5;
    --lh-relaxed: 1.65;
    --lh-loose:   1.8;

    /* Font weights */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    800;

    /* Letter spacing */
    --ls-tight:   -0.02em;
    --ls-snug:    -0.01em;
    --ls-normal:   0;
    --ls-wide:     0.02em;
    --ls-wider:    0.06em;
    --ls-widest:   0.12em;

    /* ===== SPACING (4px base, then 1.5x multiplier) ===== */
    --space-0:  0;
    --space-1:  0.25rem;    /* 4 */
    --space-2:  0.5rem;     /* 8 */
    --space-3:  0.75rem;    /* 12 */
    --space-4:  1rem;       /* 16 */
    --space-5:  1.5rem;     /* 24 */
    --space-6:  2rem;       /* 32 */
    --space-7:  3rem;       /* 48 */
    --space-8:  4rem;       /* 64 */
    --space-9:  6rem;       /* 96 */
    --space-10: 8rem;       /* 128 */

    /* ===== RADIUS ===== */
    --r-xs:   4px;
    --r-sm:   6px;
    --r:      10px;     /* default */
    --r-lg:   14px;
    --r-xl:   20px;
    --r-2xl:  28px;
    --r-pill: 9999px;

    /* ===== SHADOW ===== */
    --sh-xs:   0 1px 2px rgba(0,0,0,0.30);
    --sh-sm:   0 2px 6px rgba(0,0,0,0.35);
    --sh:      0 4px 12px rgba(0,0,0,0.45);
    --sh-lg:   0 10px 30px rgba(0,0,0,0.55);
    --sh-xl:   0 24px 56px rgba(0,0,0,0.65);
    --sh-brand: 0 4px 16px rgba(245, 77, 45, 0.35);

    /* ===== LAYOUT ===== */
    --container-max:   1200px;
    --container-wide:  1440px;
    --container-pad:   clamp(1rem, 3vw, 2rem);
    --header-h:        72px;
    --header-h-mobile: 60px;

    /* ===== Z-INDEX scale ===== */
    --z-base:     0;
    --z-content:  1;
    --z-sticky:   100;
    --z-header:   500;
    --z-overlay:  900;
    --z-modal:    1000;
    --z-toast:    1100;
    --z-tooltip:  1200;

    /* ===== MOTION ===== */
    --duration-fast:   120ms;
    --duration:        180ms;
    --duration-slow:   320ms;

    --ease:           cubic-bezier(.4, 0, .2, 1);
    --ease-in:        cubic-bezier(.4, 0, 1,  1);
    --ease-out:       cubic-bezier(0,  0, .2, 1);
    --ease-bounce:    cubic-bezier(.68,-.55,.27,1.55);

    /* ===== FORM ===== */
    --input-h:      44px;
    --input-h-sm:   36px;
    --input-h-lg:   52px;
    --input-pad-x:  0.875rem;

    /* ===== FOCUS RING ===== */
    --focus-ring:   0 0 0 3px var(--c-brand-ring);
    --focus-offset: 2px;

    /* ===== BACKDROP ===== */
    --backdrop: rgba(0, 0, 0, 0.6);

    /* ===== Color-scheme cho native UI (scrollbar, form controls) ===== */
    color-scheme: dark;
}

/* Light mode support — opt-in qua data-theme="light" trên <html> */
[data-theme="light"] {
    --c-bg-0:        #ffffff;
    --c-bg-1:        #f8f8f8;
    --c-bg-2:        #efefef;
    --c-bg-3:        #e2e2e2;
    --c-border:      #e5e5e5;
    --c-border-hi:   #c5c5c5;
    --c-divider:     rgba(0,0,0,0.08);
    --c-text:        #1a1a1a;
    --c-text-dim:    #5a5a5a;
    --c-text-muted:  #8a8a8a;
    color-scheme: light;
}

} /* /@layer tokens */