/* Blue Labs Design Lab — tokens.css v0.1.0
   Single source of truth. Components consume these; nothing else. */

:root {
  /* ---- Color: ground & ink (light) ---- */
  --bl-bg:            #F3F6FB;
  --bl-surface:       #FFFFFF;
  --bl-surface-2:     #E9EEF6;
  --bl-ink:           #0B1220;
  --bl-ink-2:         #4C5670;
  --bl-ink-3:         #7C859C;
  --bl-line:          #D6DDEA;
  --bl-line-strong:   #B7C1D6;

  /* ---- Color: accent (Blue Labs cobalt) ---- */
  --bl-accent:        #1F4FE8;
  --bl-accent-hover:  #1A43C6;
  --bl-accent-active: #153AA9;
  --bl-accent-ink:    #FFFFFF;
  --bl-accent-soft:   #E3EAFF;
  --bl-accent-soft-ink:#1638A6;

  /* ---- Color: semantic ---- */
  --bl-ok:            #157F4B;
  --bl-ok-soft:       #DDF5E8;
  --bl-warn:          #9A5B00;
  --bl-warn-soft:     #FFEFD1;
  --bl-danger:        #C4232E;
  --bl-danger-hover:  #A31C26;
  --bl-danger-soft:   #FFE1E3;

  /* ---- Focus ---- */
  --bl-focus-ring:    0 0 0 2px var(--bl-surface), 0 0 0 4px var(--bl-accent);

  /* ---- Type ---- */
  --bl-font-display:  "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --bl-font-body:     "IBM Plex Sans", "Segoe UI", Roboto, system-ui, sans-serif;
  --bl-font-mono:     "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --bl-text-xs:   0.75rem;   /* 12 */
  --bl-text-sm:   0.875rem;  /* 14 */
  --bl-text-md:   1rem;      /* 16 */
  --bl-text-lg:   1.125rem;  /* 18 */
  --bl-text-xl:   1.375rem;  /* 22 */
  --bl-text-2xl:  1.75rem;   /* 28 */
  --bl-text-3xl:  2.375rem;  /* 38 */
  --bl-text-4xl:  3.25rem;   /* 52 */

  --bl-leading-tight: 1.15;
  --bl-leading-body:  1.55;
  --bl-tracking-caps: 0.08em;

  /* ---- Space (4pt grid) ---- */
  --bl-space-1:  4px;
  --bl-space-2:  8px;
  --bl-space-3:  12px;
  --bl-space-4:  16px;
  --bl-space-5:  24px;
  --bl-space-6:  32px;
  --bl-space-7:  48px;
  --bl-space-8:  64px;
  --bl-space-9:  96px;

  /* ---- Radius ---- */
  --bl-radius-s:    6px;
  --bl-radius-m:    10px;
  --bl-radius-l:    20px;
  --bl-radius-pill: 999px;

  /* ---- Elevation ---- */
  --bl-shadow-1: 0 1px 2px rgba(11,18,32,.06), 0 1px 1px rgba(11,18,32,.04);
  --bl-shadow-2: 0 4px 12px rgba(11,18,32,.08), 0 1px 3px rgba(11,18,32,.06);
  --bl-shadow-3: 0 16px 40px rgba(11,18,32,.16), 0 4px 12px rgba(11,18,32,.08);

  /* ---- Motion ("soft touch") ---- */
  --bl-motion-fast: 120ms;  /* hover, press, toggle */
  --bl-motion-base: 200ms;  /* reveals, tabs, tooltips */
  --bl-motion-slow: 320ms;  /* modals, drawers, layout */
  --bl-ease-out:    cubic-bezier(.2, .8, .2, 1);
  --bl-ease-in:     cubic-bezier(.4, 0, 1, 1);
  --bl-ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* ---- Layout ---- */
  --bl-bp-sm:  640px;
  --bl-bp-md:  900px;
  --bl-bp-lg:  1200px;
  --bl-bp-xl:  1440px;
  --bl-measure: 68ch;
  --bl-control-h-sm: 32px;
  --bl-control-h-md: 40px;
  --bl-control-h-lg: 48px;
}

/* Dark: system preference, unless the viewer explicitly chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bl-bg:            #0A0F1C;
    --bl-surface:       #111A2C;
    --bl-surface-2:     #18233A;
    --bl-ink:           #E8EDF7;
    --bl-ink-2:         #A7B1C7;
    --bl-ink-3:         #6F7B96;
    --bl-line:          #22304A;
    --bl-line-strong:   #33445F;

    --bl-accent:        #5B86FF;
    --bl-accent-hover:  #7A9CFF;
    --bl-accent-active: #4A72E6;
    --bl-accent-ink:    #06102A;
    --bl-accent-soft:   #1B2B58;
    --bl-accent-soft-ink:#B9CBFF;

    --bl-ok:            #4FD08A;
    --bl-ok-soft:       #10301F;
    --bl-warn:          #F2B24B;
    --bl-warn-soft:     #33260C;
    --bl-danger:        #FF6B74;
    --bl-danger-hover:  #FF8A91;
    --bl-danger-soft:   #3A1418;

    --bl-shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --bl-shadow-2: 0 4px 12px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4);
    --bl-shadow-3: 0 16px 40px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
  }
}

/* Dark: explicit choice always wins */
:root[data-theme="dark"] {
  --bl-bg:            #0A0F1C;
  --bl-surface:       #111A2C;
  --bl-surface-2:     #18233A;
  --bl-ink:           #E8EDF7;
  --bl-ink-2:         #A7B1C7;
  --bl-ink-3:         #6F7B96;
  --bl-line:          #22304A;
  --bl-line-strong:   #33445F;

  --bl-accent:        #5B86FF;
  --bl-accent-hover:  #7A9CFF;
  --bl-accent-active: #4A72E6;
  --bl-accent-ink:    #06102A;
  --bl-accent-soft:   #1B2B58;
  --bl-accent-soft-ink:#B9CBFF;

  --bl-ok:            #4FD08A;
  --bl-ok-soft:       #10301F;
  --bl-warn:          #F2B24B;
  --bl-warn-soft:     #33260C;
  --bl-danger:        #FF6B74;
  --bl-danger-hover:  #FF8A91;
  --bl-danger-soft:   #3A1418;

  --bl-shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --bl-shadow-2: 0 4px 12px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4);
  --bl-shadow-3: 0 16px 40px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bl-motion-fast: 0ms;
    --bl-motion-base: 0ms;
    --bl-motion-slow: 0ms;
  }
}