/* css/tokens.css - Single source of truth for all design values */

:root {
    /* === BRAND COLORS === */
    --color-primary-50:  #fff8f0;
    --color-primary-100: #ffeedd;
    --color-primary-200: #ffd4a8;
    --color-primary-300: #ffb870;
    --color-primary-400: #ff9a3c;
    --color-primary-500: #ff8800;  /* Nodaar Orange */
    --color-primary-600: #e67a00;
    --color-primary-700: #bf6600;
    --color-primary-800: #995200;
    --color-primary-900: #7a4100;

    /* === NEUTRAL PALETTE === */
    --color-gray-25:  #fcfcfd;
    --color-gray-50:  #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-150: #edeef1;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-gray-950: #0d1117;

    /* === SEMANTIC COLORS === */
    --color-success-light: #ecfdf5;
    --color-success-mid:   #d1fae5;
    --color-success:       #10b981;
    --color-success-dark:  #047857;

    --color-warning-light: #fffbeb;
    --color-warning-mid:   #fef3c7;
    --color-warning:       #f59e0b;
    --color-warning-dark:  #b45309;

    --color-error-light:   #fef2f2;
    --color-error-mid:     #fee2e2;
    --color-error:         #ef4444;
    --color-error-dark:    #b91c1c;

    --color-info-light:    #eff6ff;
    --color-info-mid:      #dbeafe;
    --color-info:          #3b82f6;
    --color-info-dark:     #1d4ed8;

    --color-purple-light:  #f5f3ff;
    --color-purple-mid:    #ede9fe;
    --color-purple:        #8b5cf6;
    --color-purple-dark:   #6d28d9;

    /* === LIGHT MODE SURFACES (Default) === */
    --surface-bg:       #f8fafc;
    --surface-card:     #ffffff;
    --surface-elevated: #ffffff;
    --surface-sidebar:  #ffffff;
    --surface-header:   rgba(255, 255, 255, 0.92);
    --surface-hover:    #f1f5f9;
    --surface-active:   #e2e8f0;
    --surface-overlay:  rgba(15, 23, 42, 0.55);

    /* === BORDER COLORS === */
    --border-default:   #e2e8f0;
    --border-light:     #f1f5f9;
    --border-medium:    #cbd5e1;
    --border-strong:    #94a3b8;
    --border-focus:     var(--color-primary-500);

    /* === TEXT COLORS === */
    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-tertiary:  #94a3b8;
    --text-inverse:   #ffffff;
    --text-accent:    var(--color-primary-500);

    /* === TYPOGRAPHY === */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --text-xs:   0.6875rem;   /* 11px */
    --text-sm:   0.8125rem;   /* 13px */
    --text-base: 0.875rem;    /* 14px */
    --text-md:   0.9375rem;   /* 15px */
    --text-lg:   1rem;        /* 16px */
    --text-xl:   1.125rem;    /* 18px */
    --text-2xl:  1.25rem;     /* 20px */
    --text-3xl:  1.5rem;      /* 24px */
    --text-4xl:  1.875rem;    /* 30px */
    --text-5xl:  2.25rem;     /* 36px */
    --text-metric: 2.625rem;  /* 42px — hero stat values */

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

    /* === SPACING === */
    --space-0:    0;
    --space-0-5:  0.125rem;   /* 2px */
    --space-1:    0.25rem;    /* 4px */
    --space-1-5:  0.375rem;   /* 6px */
    --space-2:    0.5rem;     /* 8px */
    --space-2-5:  0.625rem;   /* 10px */
    --space-3:    0.75rem;    /* 12px */
    --space-3-5:  0.875rem;   /* 14px */
    --space-4:    1rem;       /* 16px */
    --space-5:    1.25rem;    /* 20px */
    --space-6:    1.5rem;     /* 24px */
    --space-7:    1.75rem;    /* 28px */
    --space-8:    2rem;       /* 32px */
    --space-10:   2.5rem;     /* 40px */
    --space-12:   3rem;       /* 48px */
    --space-16:   4rem;       /* 64px */

    /* === BORDERS === */
    --radius-xs:   0.25rem;   /* 4px */
    --radius-sm:   0.375rem;  /* 6px */
    --radius-md:   0.5rem;    /* 8px */
    --radius-lg:   0.75rem;   /* 12px */
    --radius-xl:   1rem;      /* 16px */
    --radius-2xl:  1.25rem;   /* 20px */
    --radius-full: 9999px;

    /* === SHADOWS === */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

    /* === LAYOUT === */
    --sidebar-width:           240px;
    --sidebar-collapsed-width: 68px;
    --header-height:           56px;
    --content-max-width:       1440px;
    --page-padding:            1.25rem;

    /* === TRANSITIONS === */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:  cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast:   120ms;
    --duration-normal: 200ms;
    --duration-slow:   300ms;

    /* === Z-INDEX === */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    600;
}

/* ==============================
   DARK MODE
   ============================== */
.dark-mode,
html[data-theme="dark"] {
    --surface-bg:       #090d16;
    --surface-card:     #111726;
    --surface-elevated: #161e31;
    --surface-sidebar:  #0d121f;
    --surface-header:   rgba(17, 23, 38, 0.88);
    --surface-hover:    rgba(255, 255, 255, 0.05);
    --surface-active:   rgba(255, 255, 255, 0.08);

    --border-default:   rgba(255, 255, 255, 0.08);
    --border-light:     rgba(255, 255, 255, 0.04);
    --border-medium:    rgba(255, 255, 255, 0.14);
    --border-strong:    rgba(255, 255, 255, 0.22);

    --text-primary:   #f8fafc;
    --text-secondary: #94a3b8;
    --text-tertiary:  #64748b;

    color-scheme: dark;
}

/* ==============================
   LEGACY TOKEN ALIASES
   (keep old component files working)
   Declared on .dark-mode too: a custom property that references var() is
   resolved where it is declared, so aliases must be re-declared for the
   dark theme or they would keep their light-mode values.
   ============================== */
:root,
.dark-mode {
    /* Typography aliases */
    --font-family-primary: var(--font-sans);
    --font-family-mono:    var(--font-mono);
    --font-extrabold:      800;
    --leading-tight:       1.25;
    --leading-normal:      1.5;
    --leading-snug:        1.375;
    --leading-relaxed:     1.625;
    --tracking-tight:      -0.02em;
    --tracking-wide:       0.02em;
    --tracking-wider:      0.04em;
    --tracking-widest:     0.08em;

    /* Border aliases */
    --border-width-thin:   1px;
    --border-width-medium: 2px;
    --radius-3xl:          var(--radius-2xl);
    --radius-none:         0;

    /* Shadow aliases */
    --shadow-glow-primary: 0 0 20px rgba(255,136,0,0.2);
    --shadow-glow-error:   0 0 20px rgba(239,68,68,0.2);
    --shadow-glow-success: 0 0 20px rgba(16,185,129,0.2);

    /* Surface aliases */
    --surface-secondary:  var(--surface-card);
    --surface-tertiary:   var(--surface-bg);

    /* Glass aliases → map to new surface tokens */
    --glass-bg:           var(--surface-active);
    --glass-bg-hover:     var(--surface-hover);
    --glass-bg-active:    var(--surface-active);
    --glass-border:       var(--border-default);
    --glass-border-hover: var(--border-medium);

    /* Ease aliases */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:  cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out:     cubic-bezier(0, 0, 0.2, 1);

    /* Duration aliases */
    --duration-fast:   120ms;
    --duration-normal: 200ms;
    --duration-slow:   300ms;
    --duration-slower: 500ms;

    /* Color gray aliases (used in some components) */
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;

    /* Semantic color aliases */
    --color-success-400: #34d399;
    --color-warning-400: #fbbf24;
    --color-error-400:   #f87171;
    --color-error-500:   #ef4444;
    --color-primary-400: #ffa142;

    /* Z-index aliases */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-popover:  500;
    --z-toast:    600;
}