/* ==========================================================================
   Stratotree Design Tokens — Apple-inspired Design System 2026
   ========================================================================== */

:root {
    /* --- Color Palette (Light Mode) --- */
    --background:         #FBFBFD;
    --surface-primary:    #FFFFFF;
    --surface-secondary:  #F2F2F7;
    --surface-tertiary:   #E5E5EA;
    --surface-elevated:   #FFFFFF;

    --text-primary:       #1D1D1F;
    --text-secondary:     rgba(60, 60, 67, 0.6);
    --text-tertiary:      rgba(60, 60, 67, 0.3);
    --text-on-accent:     #FFFFFF;

    --color-primary:      #007AFF;
    --color-primary-hover:#0077ED;
    --color-success:      #34C759;
    --color-warning:      #FF9500;
    --color-danger:       #FF3B30;
    --color-info:         #5AC8FA;
    --color-purple:       #AF52DE;
    --color-indigo:       #5856D6;

    --border-default:     rgba(60, 60, 67, 0.12);
    --border-strong:      rgba(60, 60, 67, 0.29);
    --separator:          rgba(60, 60, 67, 0.12);
    --divider:            #D2D2D7;

    /* --- Gradient Accents --- */
    --gradient-hero:      radial-gradient(ellipse at 50% 0%, rgba(0,113,227,0.15) 0%, transparent 70%);
    --gradient-dark-1:    linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    --gradient-dark-2:    linear-gradient(180deg, #000000 0%, #1D1D1F 100%);

    /* --- Liquid Glass --- */
    --glass-bg:           rgba(255, 255, 255, 0.72);
    --glass-border:       rgba(255, 255, 255, 0.18);
    --glass-blur:         blur(20px) saturate(180%);
    --glass-shadow:       0 4px 30px rgba(0, 0, 0, 0.1);

    /* --- Gray Scale (Apple System) --- */
    --gray-50:  #F9FAFB;
    --gray-100: #F2F2F7;
    --gray-200: #E5E5EA;
    --gray-300: #D1D1D6;
    --gray-400: #C7C7CC;
    --gray-500: #AEAEB2;
    --gray-600: #8E8E93;
    --gray-700: #636366;
    --gray-800: #48484A;
    --gray-900: #3A3A3C;
    --gray-950: #1C1C1E;

    /* --- Fluid Typography --- */
    --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm:   clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.375rem);
    --text-xl:   clamp(1.25rem, 0.9rem + 1.5vw, 1.75rem);
    --text-2xl:  clamp(1.5rem, 1rem + 2vw, 2.25rem);
    --text-3xl:  clamp(1.875rem, 1rem + 3vw, 3rem);
    --text-4xl:  clamp(2.25rem, 1rem + 4vw, 4rem);
    --text-5xl:  clamp(2.5rem, 1rem + 5vw, 6rem);

    /* --- Line Heights & Letter Spacing --- */
    --leading-tight:    1.05;
    --leading-snug:     1.2;
    --leading-normal:   1.5;
    --leading-relaxed:  1.65;
    --tracking-tighter: -0.04em;
    --tracking-tight:   -0.02em;
    --tracking-normal:  0em;
    --tracking-wide:    0.01em;
    --tracking-wider:   0.05em;

    /* --- Font Stacks --- */
    --font-sans:  -apple-system, BlinkMacSystemFont, "SF Pro Display",
                  "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-serif: "SF Serif", "New York", Georgia, "Times New Roman", serif;
    --font-mono:  "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, monospace;

    /* --- Spacing (8pt grid) --- */
    --space-0:  0;
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* --- Border Radius --- */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-3xl:  24px;
    --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.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:    0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg:    0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    --shadow-xl:    0 20px 25px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.04);
    --shadow-glass: 0 4px 30px rgba(0,0,0,0.1);

    /* --- Motion --- */
    --duration-instant:  50ms;
    --duration-fast:     100ms;
    --duration-normal:   200ms;
    --duration-moderate: 300ms;
    --duration-slow:     500ms;

    --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --ease-dramatic: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* --- Layout --- */
    --max-width-content: 980px;
    --max-width-wide:    1120px;
    --max-width-prose:   65ch;
    --min-touch-target:  44px;
    --nav-height:        44px;

    /* --- Z-Index --- */
    --z-base:     0;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-popover:  500;
    --z-toast:    600;
    --z-tooltip:  700;
}

/* --- Dark Mode --- */
@media (prefers-color-scheme: dark) {
    :root {
        --background:         #000000;
        --surface-primary:    #000000;
        --surface-secondary:  #1C1C1E;
        --surface-tertiary:   #2C2C2E;
        --surface-elevated:   #1C1C1E;

        --text-primary:       #F5F5F7;
        --text-secondary:     rgba(235, 235, 245, 0.6);
        --text-tertiary:      rgba(235, 235, 245, 0.3);

        --color-primary:      #0A84FF;
        --color-primary-hover:#2997FF;
        --color-success:      #30D158;
        --color-warning:      #FF9F0A;
        --color-danger:       #FF453A;
        --color-info:         #64D2FF;
        --color-purple:       #BF5AF2;
        --color-indigo:       #5E5CE6;

        --border-default:     rgba(84, 84, 88, 0.36);
        --border-strong:      rgba(84, 84, 88, 0.65);
        --separator:          rgba(84, 84, 88, 0.36);

        --glass-bg:           rgba(30, 30, 30, 0.65);
        --glass-border:       rgba(255, 255, 255, 0.08);
    }
}

/* --- Accessibility: Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-instant:  0ms;
        --duration-fast:     0ms;
        --duration-normal:   0ms;
        --duration-moderate: 0ms;
        --duration-slow:     0ms;
    }
}

/* --- Accessibility: Reduced Transparency --- */
@media (prefers-reduced-transparency: reduce) {
    :root {
        --glass-bg:     var(--surface-primary);
        --glass-border: var(--border-default);
        --glass-blur:   none;
    }
}

/* --- Accessibility: High Contrast --- */
@media (prefers-contrast: more) {
    :root {
        --text-secondary:  rgba(60, 60, 67, 0.85);
        --text-tertiary:   rgba(60, 60, 67, 0.6);
        --border-default:  rgba(60, 60, 67, 0.4);
        --border-strong:   rgba(60, 60, 67, 0.6);
    }
}