/* ═══════════════════════════════════════════════════════════════
   ALFRED — Design Tokens
   Swiss / International / Bauhaus aesthetic.
   Dark mode only. Typographic. Minimal.

   Every CSS custom property used across the project is defined
   here. Numeric aliases (text-1 … text-4, surface-0 … surface-3)
   exist alongside semantic names for convenience.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ─── Palette ─────────────────────────────────────────────── */

  --color-bg:               #0a0a0a;
  --color-bg-raised:        #111111;
  --color-bg-translucent:   rgba(10, 10, 10, 0.75);

  --color-surface-0:        #111111;   /* sidebar, input bar bg       */
  --color-surface-1:        #1a1a1a;   /* cards, inputs, recessed     */
  --color-surface-2:        #242424;   /* hover, elevated surfaces    */
  --color-surface-3:        #2e2e2e;   /* active states, scrollbars   */

  --color-border:           #2a2a2a;
  --color-border-subtle:    #1e1e1e;

  --color-backdrop:         rgba(0, 0, 0, 0.6);


  /* ─── Text — semantic names ───────────────────────────────── */

  --color-text:             #e8e8e8;   /* primary — headings, body    */
  --color-text-primary:     #e8e8e8;   /* alias of --color-text       */
  --color-text-secondary:   #a0a0a0;   /* secondary — LLM body, sub   */
  --color-text-muted:       #6a6a6a;   /* muted — timestamps, labels  */
  --color-text-tertiary:    #6a6a6a;   /* alias of --color-text-muted */
  --color-text-faint:       #444444;   /* faintest — placeholders     */

  /* ─── Text — numeric shorthand ────────────────────────────── */

  --color-text-1:           #e8e8e8;   /* = primary                   */
  --color-text-2:           #a0a0a0;   /* = secondary                 */
  --color-text-3:           #6a6a6a;   /* = muted                     */
  --color-text-4:           #444444;   /* = faint                     */


  /* ─── Accent ──────────────────────────────────────────────── */

  --color-accent-red:       #d94040;   /* errors, stop, destructive   */
  --color-accent-green:     #3daa5c;   /* success, token counter ok   */
  --color-accent-yellow:    #ccaa33;   /* warnings, token counter mid */


  /* ─── Message-specific ────────────────────────────────────── */

  --color-user-msg:         #181818;   /* user message bg             */
  --color-llm-msg:          transparent;

  --color-scrollbar:        #2a2a2a;
  --color-scrollbar-hover:  #3a3a3a;


  /* ─── Typography ──────────────────────────────────────────── */

  /* Base stacks */
  --font-sans:  'Space Grotesk', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'IBM Plex Mono', 'SF Mono', 'Consolas', 'Liberation Mono', monospace;

  /* Semantic aliases — referenced everywhere */
  --font-ui:    var(--font-sans);      /* chrome, buttons, labels     */
  --font-user:  var(--font-sans);      /* user-authored messages      */
  --font-llm:   var(--font-mono);      /* LLM-generated messages      */

  /* Scale — modular, base 16 px */
  --text-xs:    0.6875rem;   /* 11px  */
  --text-sm:    0.8125rem;   /* 13px  */
  --text-base:  0.9375rem;   /* 15px  */
  --text-md:    1rem;        /* 16px  */
  --text-lg:    1.125rem;    /* 18px  */
  --text-xl:    1.375rem;    /* 22px  */
  --text-2xl:   1.75rem;     /* 28px  */

  --leading-tight:   1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-bold:     700;


  /* ─── Spacing ─────────────────────────────────────────────── */

  --space-1:    0.25rem;     /*  4px  */
  --space-2:    0.5rem;      /*  8px  */
  --space-3:    0.75rem;     /* 12px  */
  --space-4:    1rem;        /* 16px  */
  --space-5:    1.25rem;     /* 20px  */
  --space-6:    1.5rem;      /* 24px  */
  --space-8:    2rem;        /* 32px  */
  --space-10:   2.5rem;      /* 40px  */
  --space-12:   3rem;        /* 48px  */
  --space-16:   4rem;        /* 64px  */


  /* ─── Radii ───────────────────────────────────────────────── */

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;


  /* ─── Transitions ─────────────────────────────────────────── */

  --duration-fast:    120ms;
  --duration-normal:  200ms;
  --duration-slow:    350ms;
  --duration-slide:   300ms;

  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shorthand for the most common transition timing */
  --transition-fast:  var(--duration-fast) var(--ease-out);


  /* ─── Z-index layers ──────────────────────────────────────── */

  --z-base:       1;
  --z-input:      70;
  --z-header:     80;
  --z-backdrop:   90;
  --z-sidebar:    100;
  --z-dialog:     200;
  --z-toast:      300;


  /* ─── Layout dimensions ───────────────────────────────────── */

  --sidebar-width:       280px;
  --sidebar-width-lg:    320px;       /* ≥ 1280 px                   */
  --header-height:       48px;
  --input-bar-height:    auto;
  --message-max-width:   720px;
  --control-h:           40px;        /* every button, input, select  */

  /* ─── Gutter ──────────────────────────────────────────────── */
  /* ONE number. All four sides. Every container. No exceptions. */
  --gutter:              0.5rem;      /*  8px — mobile               */

}


/* ─── Responsive gutter ────────────────────────────────────── */

@media (min-width: 768px) {
  :root {
    --gutter:  0.75rem;               /* 12px — tablet               */
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter:  1rem;                  /* 16px — desktop              */
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter:  1.25rem;               /* 20px — large                */
  }
}


/* ═══════════════════════════════════════════════════════════════
   Breakpoints (reference — not usable as variables in CSS)

   374px   — iPhone SE / smallest supported
   480px   — Small phones, landscape
   768px   — Tablet portrait, sidebar overlay
   1024px  — Desktop / tablet landscape, sidebar persistent
   1280px  — Large desktop
   1800px  — Ultra-wide / 4K

   Folding devices:
     @media (horizontal-viewport-segments: 2)
     env(viewport-segment-width 0 0)  — left segment width
     env(viewport-segment-left 1 0)   — right segment start
   ═══════════════════════════════════════════════════════════════ */