/* ==========================================================================
   CodeCharter Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for colors, typography, spacing, radii, shadows
   and motion across the marketing site, the portal app, and the docs.
   Dark mode is the default; html[data-theme="light"] flips the palette.
   ========================================================================== */

:root {
    /* --- Color tokens (dark mode is the default) -------------------------- */
    --bg-base:        #0B0D10;   /* page background                            */
    --bg-elevated:    #14171C;   /* cards, surface, navbar                     */
    --bg-overlay:     #1B1F26;   /* hover/active, popovers                     */
    --bg-inset:       #0F1115;   /* inputs, code blocks                        */

    --text-primary:   #ECEDEE;
    --text-secondary: #A0A4AC;
    --text-muted:     #6B7280;
    --text-inverse:   #0B0D10;

    --border-subtle:  #1F232B;
    --border-default: #2A2F38;
    --border-strong:  #3A4150;

    /* Accent green — clean, modern, evokes "code is safe". One hue, three
       intensities. Avoid additional accent colors to keep the page calm. */
    --accent:         #10B981;
    --accent-hover:   #0EA371;
    --accent-soft:    rgba(16, 185, 129, 0.12);
    --accent-on:      #062416;

    --success:        #10B981;
    --warning:        #F59E0B;
    --error:          #EF4444;
    --info:           #3B82F6;

    /* --- Typography ------------------------------------------------------- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

    --fs-12: 0.75rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-30: 1.875rem;
    --fs-36: 2.25rem;
    --fs-48: 3rem;
    --fs-60: 3.75rem;
    --fs-72: 4.5rem;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;

    --lh-tight:   1.1;
    --lh-snug:    1.25;
    --lh-normal:  1.5;
    --lh-relaxed: 1.625;

    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;

    /* --- Spacing (8 px grid) ---------------------------------------------- */
    --space-1:  0.25rem;   /*  4 px */
    --space-2:  0.5rem;    /*  8 px */
    --space-3:  0.75rem;   /* 12 px */
    --space-4:  1rem;      /* 16 px */
    --space-5:  1.5rem;    /* 24 px */
    --space-6:  2rem;      /* 32 px */
    --space-7:  3rem;      /* 48 px */
    --space-8:  4rem;      /* 64 px */
    --space-9:  6rem;      /* 96 px */
    --space-10: 8rem;      /* 128 px */

    /* --- Radii ----------------------------------------------------------- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* --- Elevation ------------------------------------------------------- */
    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.35);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-focus: 0 0 0 3px var(--accent-soft);

    /* --- Layout ---------------------------------------------------------- */
    --container-narrow: 720px;
    --container-default: 1100px;
    --container-wide: 1280px;

    --nav-height: 64px;

    /* --- Motion ---------------------------------------------------------- */
    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Light mode overrides ---------------------------------------------- */
html[data-theme='light'] {
    --bg-base:        #FFFFFF;
    --bg-elevated:    #F7F8FA;
    --bg-overlay:     #EEF0F4;
    --bg-inset:       #F0F2F5;

    --text-primary:   #0B0D10;
    --text-secondary: #4A5160;
    --text-muted:     #7B8392;
    --text-inverse:   #FFFFFF;

    --border-subtle:  #E5E7EB;
    --border-default: #D1D5DB;
    --border-strong:  #9CA3AF;

    --accent-soft:    rgba(16, 185, 129, 0.10);
    --accent-on:      #FFFFFF;

    --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-sm:    0 2px 6px rgba(15, 23, 42, 0.06);
    --shadow-md:    0 6px 16px rgba(15, 23, 42, 0.08);
    --shadow-lg:    0 16px 40px rgba(15, 23, 42, 0.12);
}

/* ==========================================================================
   Backwards-compat aliases for the original .portal-* / .app-* selectors.
   They consumed --bg-primary / --bg-surface / --accent-* / etc. which the
   first iteration hard-coded with Catppuccin-Mocha values. Map them onto
   the new palette so the existing pages flip to the new look without a
   page-by-page rewrite. Drop these aliases once every page is on ds-*.
   ========================================================================== */
:root {
    --bg-primary:   var(--bg-base);
    --bg-secondary: var(--bg-elevated);
    --bg-surface:   var(--bg-elevated);
    --bg-hover:     var(--bg-overlay);
    --bg-active:    var(--bg-overlay);
    --border-color: var(--border-default);
    --header-height: 48px;
    --toolbar-height: 52px;
}

/* --- Honour system preference when no explicit theme is set ----------- */
@media (prefers-color-scheme: light) {
    html:not([data-theme]) {
        --bg-base:        #FFFFFF;
        --bg-elevated:    #F7F8FA;
        --bg-overlay:     #EEF0F4;
        --bg-inset:       #F0F2F5;

        --text-primary:   #0B0D10;
        --text-secondary: #4A5160;
        --text-muted:     #7B8392;
        --text-inverse:   #FFFFFF;

        --border-subtle:  #E5E7EB;
        --border-default: #D1D5DB;
        --border-strong:  #9CA3AF;

        --accent-soft:    rgba(16, 185, 129, 0.10);
        --accent-on:      #FFFFFF;
    }
}