/*
    Design Tokens
    The single source of truth for primitives and semantic theme variables.
    Link it in your HTML: <link rel="stylesheet" href="/path/to/tokens.css">
    Or import it in CSS: @import url("/path/to/tokens.css");
    Then use variables like: color: var(--color-text-high);
*/

/*-------------------------------------------*/
/* 0. PRIMITIVES (raw tokens)                */
/*-------------------------------------------*/
:root {
    scroll-behavior: smooth;
    --font-family: 'Inter', sans-serif;

    /* Typography Scale */
    --font-size-h1: 2.25rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;
    --font-size-body: 1rem;
    --font-size-label: 0.875rem;
    --font-size-caption: 0.875rem;

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

    --line-height-heading: 1.3;
    --line-height-body: 1.6;
    --letter-spacing-heading: -1%;

    /* Font Shorthands */
    --font-h1: var(--font-weight-bold) var(--font-size-h1)/var(--line-height-heading) var(--font-family);
    --font-h2: var(--font-weight-semibold) var(--font-size-h2)/var(--line-height-heading) var(--font-family);
    --font-h3: var(--font-weight-semibold) var(--font-size-h3)/var(--line-height-heading) var(--font-family);
    --font-body-base: var(--font-weight-regular) var(--font-size-body)/var(--line-height-body) var(--font-family);
    --font-label: var(--font-weight-medium) var(--font-size-label)/var(--line-height-body) var(--font-family);
    --font-caption: var(--font-weight-regular) var(--font-size-caption)/var(--line-height-body) var(--font-family);

    /* Spacing (8-Point Grid) */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Strokes */
    --stroke-sm: 1.5px;
    --stroke-md: 3px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Motion */
    --duration-quick: 150ms;
    --duration-medium: 300ms;
    --duration-slow: 500ms;
    --easing: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);

    /* Component Sizing */
    --touch-target: 48px;
    --avatar-size-sm: 32px;
    --avatar-size-md: 48px;
    --avatar-size-lg: 64px;
    --icon-size-sm: 16px;
    --icon-size-md: 24px;
    --icon-size-lg: 32px;
    --progress-height: 8px;
    --switch-track-width: 44px;
    --switch-track-height: 24px;
    --switch-thumb-size: 16px;
    --switch-thumb-offset: 4px;
    --pill-group-padding: 4px;
    --pill-group-gap: 2px;
    --scrollbar-width: 8px;

    /* Indigo */
    --indigo-50: #EEF2FF;
    --indigo-100: #E0E7FF;
    --indigo-200: #C7D2FE;
    --indigo-300: #A5B4FC;
    --indigo-400: #818CF8;
    --indigo-500: #6366F1;
    --indigo-600: #4F46E5;
    --indigo-700: #4338CA;
    --indigo-800: #3730A3;
    --indigo-900: #312E81;

    /* Fuchsia */
    --fuchsia-50: #FDF4FF;
    --fuchsia-100: #FAE8FF;
    --fuchsia-200: #F5D0FE;
    --fuchsia-300: #F0ABFC;
    --fuchsia-400: #E879F9;
    --fuchsia-500: #D946EF;
    --fuchsia-600: #C026D3;
    --fuchsia-700: #A21CAF;
    --fuchsia-800: #86198F;
    --fuchsia-900: #701A75;

    /* Neutrals */
    --white: #FFFFFF;
    --black: #000000;
    --light: #E0E0E0;
    --night: #171717;
    --surface-dark: #262626;
    --gray-50: #FAFAFA;
    --gray-100: #F5F5F5;
    --gray-200: #E5E5E5;
    --gray-300: #D4D4D4;
    --gray-400: #A3A3A3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #0A0A0A;

    /* Slate Swatch */
    --slate-50: #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1E293B;
    --slate-900: #0F172A;

    /* Functional */
    --success: #059669;
    --warning: #D97706;
    --danger: #DC2626;

    /* Logo */
    --logo-teal: #14B8A6;
    --logo-red: #B91C1C;
    --logo-slate: #343F4B;
    --logo-ink: #111827;

    /* Accents */
    --accent-positive: #6EE7B7;
    --accent-neutral: #64748B;
}

/*-------------------------------------------*/
/* 1. SEMANTIC TOKENS (themes)               */
/*-------------------------------------------*/
[data-theme="light"] {
    --color-primary: var(--indigo-600);
    --color-primary-hover: var(--indigo-700);
    --color-primary-active: var(--indigo-800);

    --color-accent: var(--fuchsia-600);
    --color-accent-hover: var(--fuchsia-700);

    --color-background: var(--light);
    --color-surface: var(--white);
    --color-surface-hover: var(--gray-100);
    --color-header-bg: var(--white);

    --color-text-high: var(--gray-900);
    --color-text-medium: var(--gray-600);
    --color-text-low: var(--gray-500);

    --color-border-default: var(--gray-300);
    --color-border-focus: var(--indigo-500);

    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-error: var(--danger);
}

[data-theme="dark"] {
    --color-primary: var(--indigo-500);
    --color-primary-hover: var(--indigo-400);
    --color-primary-active: var(--indigo-300);

    --color-accent: var(--fuchsia-500);
    --color-accent-hover: var(--fuchsia-400);

    --color-background: var(--night);
    --color-surface: var(--gray-800);
    --color-surface-hover: var(--gray-700);
    --color-header-bg: var(--gray-800);

    --color-text-high: var(--white);
    --color-text-medium: var(--gray-400);
    --color-text-low: var(--gray-500);

    --color-border-default: var(--gray-600);
    --color-border-focus: var(--indigo-400);

    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-error: var(--danger);
}