/* Design tokens — single source of truth. Dark on :root; .light overrides at bottom. */

:root {
    color-scheme: dark;

    /* Semantic tokens (dark) */
    /* Surfaces */
    --background:            #0b0b0c;
    --foreground:            #f6f3ec;   /* warm ivory */
    --card:                  #151516;
    --card-foreground:       #f6f3ec;
    --popover:               #18191a;
    --popover-foreground:    #f6f3ec;

    /* Brand */
    --primary:               #3b63f7;
    --primary-foreground:    #ffffff;

    /* Neutral surfaces */
    --secondary:             #2a2b2c;
    --secondary-foreground:  #f6f3ec;
    --muted:                 #2a2b2c;
    --muted-foreground:      #94908a;
    --accent-surface:        #2a2b2c;
    --accent-surface-foreground: #f6f3ec;

    /* Lines & focus */
    --border:                color-mix(in srgb, var(--foreground) 9%, transparent);
    --input:                 #1d1d1e;
    --ring:                  #3b63f7;

    /* Status */
    --destructive:           #c9372d;
    --destructive-foreground:#ffffff;
    --success:               #7dd88f;

    /* Sidebar sub-palette */
    --sidebar-background:        #0e0e0f;
    --sidebar-foreground:        #f6f3ec;
    --sidebar-accent:            #2a2b2c;
    --sidebar-accent-foreground: #f6f3ec;
    --sidebar-border:            color-mix(in srgb, var(--foreground) 9%, transparent);
    --sidebar-ring:              #3b63f7;

    /* Charts */
    --chart-1: #ffcd33;
    --chart-2: #c5ef57;
    --chart-3: #ffffff;
    --chart-4: #c9372d;
    --chart-5: #2a2b2c;

    /* Scales */

    /* Radius */
    --radius:        10px;
    --radius-sm:     8px;
    --radius-xs:     6px;
    --radius-full:   999px;
    --radius-base:   0.5rem;
    --radius-lg:     var(--radius-base);
    --radius-md:     calc(var(--radius-base) - 2px);
    --radius-sm-calc:calc(var(--radius-base) - 4px);

    /* Spacing (8px system) */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Motion */
    --ease-ui:          cubic-bezier(.4, 0, .2, 1);
    --ease-expressive:  cubic-bezier(.32, .72, 0, 1);
    --dur:              .15s;
    --dur-in:           .22s;
    --dur-out:          .16s;
    --dur-panel:        .28s;
    --dur-expressive:   700ms;

    /* Fonts */
    --font-sans:      'Geist Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:      'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
    --font-decorative:'Geist Pixel Circle', var(--font-sans);
    --font-ui:        var(--font-sans);
    --font-prose:     var(--font-sans);
    --font-code:      var(--font-mono);

    /* Tracking */
    --tracking-eyebrow:       .14em;
    --tracking-eyebrow-wide:  .18em;
    --tracking-display:       -.025em;
    --tracking-display-tight: -.055em;

    /* UI type scale (app chrome) */
    --text-xs:    12px;  --leading-xs:   1.4;
    --text-sm:    14px;  --leading-sm:   1.5;
    --text-base:  14px;  --leading-base: 1.5;
    --text-lg:    18px;  --leading-lg:   1.4;
    --text-xl:    24px;  --leading-xl:   1.3;
    --text-display-ui: 30px;

    /* Editorial type scale — fixed px */
    --fs-h1: 80px;  --lh-h1: 72px;  --ls-h1: -2px;    --fw-h1: 500;
    --fs-h2: 64px;  --lh-h2: 64px;  --ls-h2: -2px;    --fw-h2: 500;
    --fs-h3: 48px;  --lh-h3: 44px;  --ls-h3: -1px;    --fw-h3: 500;
    --fs-h4: 36px;  --lh-h4: 40px;  --ls-h4: -.75px;  --fw-h4: 500;
    --fs-h5: 28px;  --lh-h5: 32px;  --ls-h5: -.5px;   --fw-h5: 500;
    --fs-h6: 24px;  --lh-h6: 28px;  --ls-h6: 0px;     --fw-h6: 500;

    --fs-body-1: 20px;  --lh-body-1: 28px;  --ls-body-1: 0px;  --fw-body-1: 400;
    --fs-body-2: 16px;  --lh-body-2: 24px;  --ls-body-2: 0px;  --fw-body-2: 400;
    --fs-body-3: 14px;  --lh-body-3: 20px;  --ls-body-3: 0px;  --fw-body-3: 400;

    --fs-label-1: 12px;  --lh-label-1: 16px;  --ls-label-1: .75px;  --fw-label-1: 500;
    --fs-label-2: 10px;  --lh-label-2: 12px;  --ls-label-2: .75px;  --fw-label-2: 500;

    /* Marketing display scale — fluid clamp so hero shrinks on mobile */
    --fs-display:   clamp(48px, 8vw, 80px);   --lh-display:   1.0;  --ls-display:   -2px;  --fw-display:   500;
    --fs-display-2: clamp(36px, 5vw, 64px);   --lh-display-2: 1.0;  --ls-display-2: -2px;  --fw-display-2: 500;
    --fs-display-3: clamp(30px, 3.5vw, 48px); --lh-display-3: 1.05; --ls-display-3: -1px;  --fw-display-3: 500;
    --fs-body-lg: var(--fs-body-1);  --lh-body-lg: var(--lh-body-1);  --ls-body-lg: var(--ls-body-1);
    --fs-body:    var(--fs-body-3);  --lh-body:    var(--lh-body-3);
    --fs-label:   var(--fs-label-1); --ls-label:   var(--ls-label-1);

    /* Marketing structural */
    --section-y:        clamp(96px, 12vw, 160px);
    --container:        min(1180px, 92vw);
    --container-narrow: 760px;

    /* Elevation */
    --shadow-overlay: 0 12px 40px rgba(0,0,0,.45);
    --shadow-modal:   0 24px 64px rgba(0,0,0,.6);

    /* Icons */
    --icon-sm:     16px;
    --icon-md:     20px;
    --icon-stroke: 1.5;

    /* Layout dimensions */
    --sidebar-width:       220px;
    --header-height:       56px;
    --panel-header-height: 44px;
    --preview-tablet:        768px;
    --preview-mobile:        390px;
    --preview-radius-tablet: 14px;
    --preview-radius-mobile: 20px;
    --brand-mark-size: 28px;
    --brand-mark-pad:  0px;

    /* Component-scoped aliases */
    --bg-header:      #191919;
    --bg-hover:       color-mix(in srgb, var(--foreground) 6%, transparent);
    --bg-active:      #232322;
    --bg-depth:       var(--background);
    --bg-lift:        var(--bg-header);

    --border-strong:  color-mix(in srgb, var(--foreground) 17%, transparent);

    --text-secondary: #c2beb4;

    /* Accent states */
    --accent-hover:   #2563eb;
    --accent-strong:  #1e40af;
    --accent-soft:    color-mix(in srgb, var(--primary) 16%, transparent);

    --error:          #f2857f;

    --gutter:         var(--space-3);
    --control-height: var(--space-8);
    --input-height:   var(--space-10);
    --text-display:   var(--text-display-ui);
}

/* Light overrides */
.light {
    --background:            #f0eeed;
    --foreground:            #040404;
    --card:                  #ffffff;
    --card-foreground:       #040404;
    --popover:               #ffffff;
    --popover-foreground:    #040404;
    --primary:               #3b63f7;
    --primary-foreground:    #ffffff;
    --secondary:             #e2dfdc;
    --secondary-foreground:  #040404;
    --muted:                 #e2dfdc;
    --muted-foreground:      #5a5a5a;
    --accent-surface:        #e2dfdc;
    --accent-surface-foreground: #040404;
    --border:                #e2dfdc;
    --input:                 #e2dfdc;
    --ring:                  #3b63f7;
    --destructive:           #c9372d;
    --destructive-foreground:#ffffff;
    --success:               #7dd88f;
    --sidebar-background:        #ffffff;
    --sidebar-foreground:        #040404;
    --sidebar-accent:            #e2dfdc;
    --sidebar-accent-foreground: #040404;
    --sidebar-border:            #e2dfdc;
}