/* ============================================================================
   PsyShift — Design tokens
   Single source of truth for colour, type, space, radius, elevation, motion.
   Every other stylesheet consumes these variables and defines no raw values.
   ========================================================================== */

:root {
  /* ── Colour: base surfaces ────────────────────────────────────────────
     A deep ink-blue rather than black: keeps the UI from feeling like a
     void and lets soft shadows read on top of it.                        */
  --c-bg:            #0A0C13;
  --c-bg-deep:       #06070C;
  --c-surface:       #141826;
  --c-surface-2:     #1B2033;
  --c-surface-3:     #232941;
  --c-surface-glass: rgba(24, 29, 46, 0.62);

  /* ── Colour: hairlines & separators ─────────────────────────────────── */
  --c-line:          rgba(255, 255, 255, 0.07);
  --c-line-strong:   rgba(255, 255, 255, 0.13);
  --c-line-accent:   rgba(124, 92, 255, 0.34);

  /* ── Colour: text ───────────────────────────────────────────────────── */
  --c-text:          #F3F5FB;
  --c-text-soft:     #C3CADD;
  --c-text-muted:    #8B94B0;
  --c-text-faint:    #626B87;

  /* ── Colour: accents ─────────────────────────────────────────────────
     Used sparingly. Violet = brand & primary action.
     Teal = money, data, confirmation. Magenta = rare urgency signal.     */
  --c-accent:        #7C5CFF;
  --c-accent-bright: #9B84FF;
  --c-accent-dim:    #5B3FD6;
  --c-accent-wash:   rgba(124, 92, 255, 0.12);

  --c-second:        #2ED3B7;
  --c-second-dim:    #17A88F;
  --c-second-wash:   rgba(46, 211, 183, 0.12);

  --c-hot:           #FF4D8F;
  --c-hot-wash:      rgba(255, 77, 143, 0.12);

  --c-warn:          #FFB44D;
  --c-warn-wash:     rgba(255, 180, 77, 0.12);

  /* The console's messages (docs/features/site-messages, 2026-09-30): a full-width
     banner in plain blue, yellow or red — the three colours everyone reads as
     information, warning and alert, so none of the brand's accents stands in. */
  --c-msg-info:      #2563EB;
  --c-msg-info-ink:  #FFFFFF;
  --c-msg-warning:   #F5B400;
  --c-msg-warning-ink: #1A1400;
  --c-msg-danger:    #D92D3A;
  --c-msg-danger-ink: #FFFFFF;

  /* ── Budget category colours (used by charts + legends) ─────────────── */
  --c-cat-ticket:    #7C5CFF;
  --c-cat-transport: #2ED3B7;
  --c-cat-stay:      #FF4D8F;
  --c-cat-food:      #FFB44D;
  --c-cat-other:     #5B8DEF;

  /* ── Typography ─────────────────────────────────────────────────────── */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Fluid type scale — clamps keep headings sane from 360px to 1600px.   */
  --t-display: clamp(2.1rem, 1.35rem + 3.1vw, 3.9rem);
  --t-h1:      clamp(1.65rem, 1.25rem + 1.7vw, 2.5rem);
  --t-h2:      clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  --t-h3:      clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --t-body:    0.95rem;
  --t-sm:      0.85rem;
  --t-xs:      0.775rem;
  --t-2xs:     0.7rem;

  --lh-tight: 1.1;
  --lh-snug:  1.32;
  --lh-body:  1.6;

  --track-display: -0.03em;
  --track-tight:   -0.015em;
  --track-caps:    0.09em;

  /* ── Space scale (4px base) ─────────────────────────────────────────── */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;

  /* Page gutter adapts to viewport; every view uses it for alignment.    */
  --gutter: clamp(1rem, 0.4rem + 2vw, 2.75rem);

  /* ── Radii ──────────────────────────────────────────────────────────── */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-full: 999px;

  /* ── Elevation — soft, wide, low-opacity. Never harsh. ──────────────── */
  --e-1: 0 1px 2px rgba(0,0,0,.34);
  --e-2: 0 4px 14px -4px rgba(0,0,0,.45);
  --e-3: 0 14px 38px -12px rgba(0,0,0,.6);
  --e-4: 0 28px 70px -22px rgba(0,0,0,.72);
  --e-glow: 0 0 0 1px var(--c-line-accent), 0 18px 48px -20px rgba(124,92,255,.65);

  /* ── Motion — fast and understated. ─────────────────────────────────── */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 340ms;
  --dur-4: 620ms;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  /* ── Layout metrics ─────────────────────────────────────────────────── */
  --sidebar-w:   264px;
  --topbar-h:    68px;
  --bottomnav-h: 62px;
  --appstrip-h:  56px;         /* the app stores strip above it (production only) */
  --content-max: 1440px;

  /* ── Glass recipe ───────────────────────────────────────────────────── */
  --glass-blur: saturate(150%) blur(18px);
}

/* Keep the design honest on very large screens: the grid grows, the
   reading measure does not. */
@media (min-width: 1800px) {
  :root { --content-max: 1560px; }
}