/* =========================================================
   tokens.css — Design tokens and theme definitions.
   ========================================================= */

:root {
    /* ---------------------------------------------------
       Typography
       --------------------------------------------------- */
    --font-family-base: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
    --font-family-mono: 'Menlo', 'Consolas', monospace;

    --font-size-base: 16px;
    --font-size-sm:   0.875rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.5rem;
    --font-size-2xl:  2rem;
    --font-size-3xl:  2.75rem;

    --line-height-base: 1.75;

    /* ---------------------------------------------------
       Spacing scale
       --------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* ---------------------------------------------------
       Radii
       --------------------------------------------------- */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-pill: 999px;

    /* ---------------------------------------------------
       Motion
       --------------------------------------------------- */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;

    /* ---------------------------------------------------
       Layout
       --------------------------------------------------- */
    --container-max: 1200px;
    --header-height: 64px;

    /* ---------------------------------------------------
       Theme transition control.
       Set to 0ms during initial paint to avoid a flash.
       The `is-ready` class on <html> enables it after load.
       --------------------------------------------------- */
    --theme-transition: 0ms;
}

/* Enable transitions only after the first paint. */
html.is-ready {
    --theme-transition: 250ms;
}

/* =========================================================
   Light theme (default)
   ========================================================= */
:root,
[data-theme="light"] {
    color-scheme: light;

    --color-primary:       #1e88e5;
    --color-primary-hover: #1565c0;
    --color-primary-soft:  #e3f2fd;

    --color-accent:       #43a047;
    --color-accent-hover: #2e7d32;

    --color-danger:  #e53935;
    --color-warning: #fb8c00;
    --color-info:    #039be5;

    --color-bg:         #f8f9fb;
    --color-surface:    #ffffff;
    --color-surface-2:  #f1f3f6;

    --color-text:       #1c1e21;
    --color-text-muted: #6b7280;

    --color-border: #e5e7eb;

    --color-link:         var(--color-primary);
    --color-link-hover:   var(--color-primary-hover);

    --color-selection-bg:   #bbdefb;
    --color-selection-text: #0d47a1;

    --color-scrollbar-track: #f1f1f1;
    --color-scrollbar-thumb: #c1c1c1;
    --color-scrollbar-thumb-hover: #a8a8a8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.10);
}

/* =========================================================
   Dark theme
   ========================================================= */
[data-theme="dark"] {
    color-scheme: dark;

    --color-primary:       #42a5f5;
    --color-primary-hover: #64b5f6;
    --color-primary-soft:  #0d2742;

    --color-accent:       #66bb6a;
    --color-accent-hover: #81c784;

    --color-danger:  #ef5350;
    --color-warning: #ffa726;
    --color-info:    #29b6f6;

    --color-bg:         #121212;
    --color-surface:    #1e1e1e;
    --color-surface-2:  #262626;

    --color-text:       #e8eaed;
    --color-text-muted: #9aa0a6;

    --color-border: #2c2c2c;

    --color-link:         var(--color-primary);
    --color-link-hover:   var(--color-primary-hover);

    --color-selection-bg:   #1565c0;
    --color-selection-text: #ffffff;

    --color-scrollbar-track: #1a1a1a;
    --color-scrollbar-thumb: #3a3a3a;
    --color-scrollbar-thumb-hover: #555555;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* =========================================================
   Reduced-motion support
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    :root,
    html.is-ready {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --theme-transition: 0ms;
    }
}