/* ==========================================================================
   chatter — Design tokens
   Source of truth: ~/AIT/g-ops/chatter/DESIGN.md
   Dark first. Data dense. Cyberpunk-strict with calibrated color as signal.
   ========================================================================== */

/* Fonts: Google Fonts CDN (self-host TODO — previous woff2 download was broken).
   font-display: swap avoids FOIT while CDN loads. */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* --------------------------------------------------------------------------
   :root — all design variables live here.
   -------------------------------------------------------------------------- */

:root {
  /* === Base palette (dark surface) ======================================= */
  --bg-0: #0A0E14; /* root background */
  --bg-1: #0E131B; /* page surface */
  --bg-2: #141A24; /* cards / panels */
  --bg-3: #1B2330; /* raised surfaces / modals */
  --bg-4: #232D3E; /* header bar / active tab */

  /* === Borders =========================================================== */
  --border-weak: #1F2733;
  --border-strong: #2F3B4E;
  --border-glow: #3AD5FF;

  /* === Text ============================================================== */
  --fg-0: #F2F5FA; /* primary text */
  --fg-1: #C8D0DB; /* secondary */
  --fg-2: #7D8594; /* tertiary / meta */
  --fg-3: #4F576A; /* disabled / placeholder */
  --fg-brand: #BAFF5E; /* live accent highlight */

  /* === Signal colors ===================================================== */
  --sig-success: #29E7A7;
  --sig-warn:    #FFB547;
  --sig-error:   #FF4D6A;
  --sig-info:    #3AD5FF;
  --sig-magenta: #E24BFF;
  --sig-lime:    #BAFF5E;
  --sig-violet:  #8A7BFF;

  /* === Hotness gradient (1-10) =========================================== */
  --hotness-1:  #4F576A; /* cold */
  --hotness-2:  #626B7E;
  --hotness-3:  #7D8594;
  --hotness-4:  #5AAFC8;
  --hotness-5:  #3AD5FF; /* cyan / warm */
  --hotness-6:  #8EE4B2;
  --hotness-7:  #BAFF5E; /* lime / hot */
  --hotness-8:  #DDD156;
  --hotness-9:  #FFB547; /* amber / peak */
  --hotness-10: #FF4D6A; /* red / overheating */

  /* === Typography ======================================================== */
  --font-ui: "Inter Tight", "Inter", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-xs:      11px;
  --fs-sm:      12px;
  --fs-md:      13px;
  --fs-lg:      14px;
  --fs-xl:      16px;
  --fs-2xl:     20px;
  --fs-display: 28px;

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

  --lh-tight:  1.15;
  --lh-normal: 1.35;
  --lh-loose:  1.5;

  --letter-spacing-caps: 0.12em;

  /* === Spacing (4px ritmic grid) ========================================= */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  /* === Radii ============================================================= */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;

  /* === Motion ============================================================ */
  --motion-fast: 120ms ease-out;

  /* === Layout chrome ===================================================== */
  --layout-max: 1440px;
  --rail-w:     64px;
  --header-h:   48px;
  --tabs-h:     44px;

  /* === Glass surfaces ==================================================== */
  /* Translucent layers for wizard cards and elevated overlays.
     backdrop-filter: blur(var(--glass-blur)) on the element itself.      */
  --glass-bg:          rgba(20, 26, 36, 0.72);   /* --bg-2 @ 72% */
  --glass-bg-strong:   rgba(27, 35, 48, 0.88);   /* --bg-3 @ 88% */
  --glass-border:      rgba(255, 255, 255, 0.06); /* top-light highlight */
  --glass-border-top:  rgba(255, 255, 255, 0.10); /* brighter top edge */
  --glass-blur:        12px;
  --glass-blur-strong: 20px;

  /* === Elevation shadows (dark-mode appropriate) ========================= */
  /* 4-level scale. No pure black — OLED smear prevention.               */
  --elev-1: 0 1px 3px rgba(0, 0, 0, 0.32),
            0 0 0 1px rgba(255, 255, 255, 0.04);
  --elev-2: 0 4px 12px rgba(0, 0, 0, 0.42),
            0 1px 3px rgba(0, 0, 0, 0.28),
            0 0 0 1px rgba(255, 255, 255, 0.05);
  --elev-3: 0 8px 24px rgba(0, 0, 0, 0.52),
            0 2px 6px rgba(0, 0, 0, 0.32),
            0 0 0 1px rgba(255, 255, 255, 0.06);
  --elev-4: 0 16px 48px rgba(0, 0, 0, 0.64),
            0 4px 12px rgba(0, 0, 0, 0.40),
            0 0 0 1px rgba(255, 255, 255, 0.07);

  /* === Easing curves ===================================================== */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);   /* fast start, smooth stop */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);    /* material-like */

  /* === Durations ========================================================= */
  --dur-micro:  160ms;  /* state changes: hover, check, toggle */
  --dur-short:  220ms;  /* button press, chip appear */
  --dur-medium: 320ms;  /* panel reveal, stepper transition */

  /* === Focus ring ======================================================== */
  --ring-color:  var(--border-glow);         /* #3AD5FF cyan */
  --ring-width:  2px;
  --ring-offset: 2px;                        /* dark gap between element and ring */

  /* === Indigo accent scale (Linear-style — secondary to lime primary) ==== */
  /* Used as wizard step active accent.                                    */
  --indigo-400: #7B82E8;
  --indigo-500: #5E6AD2;
  --indigo-600: #4A55B8;
  --indigo-700: #3A43A0;

  /* === Wizard layout ===================================================== */
  --wizard-max-w: 840px;  /* form card max-width, centered */
}