/* ═══════════════════════════════════════════════════════════════════════
   Velros design tokens — THE single source of truth (canonical: docs/DESIGN.md).
   The brand system is adopted from apps/web-b2b: warm paper canvas, forest-ink
   workhorse, a bright-green (#3fcf8e) accent, a warm-gray neutral ramp, and the
   Pretendard / Playfair + Noto Serif KR type system.

   Two layers live here:
   1. The web-b2b token contract (--gray-*, --b2b-*, type/radius/shadow/motion) —
      lifted verbatim so the two apps share one brand vocabulary.
   2. The app's own consumer tokens (--paper, --ink, --green, --background,
      --font-sans, …) mapped onto that contract. Every Tailwind utility, .brand-*
      rule, and front_door.css var() reads these names, so swapping the layer
      below re-skins the whole app with no per-surface edits.

   Loaded first by every layout (standard + immersive). Change a value here and it
   ripples everywhere — no per-surface duplication.
   ═══════════════════════════════════════════════════════════════════════ */

/* Toss Moneygraphy — used ONLY for money FIGURES (lining digits + their separators) in
   --font-display, so amounts read as money: Playfair's figures are oldstyle (its 0 sits
   like an o, its 7 drops below the baseline). Headings otherwise take Playfair (Latin) and
   Pretendard (한글) — Moneygraphy no longer carries Korean glyphs here. Self-hosted under
   Toss's licence (© 비바리퍼블리카): free commercial use, serving from our own site
   permitted, modification/redistribution forbidden — Toss's own unmodified v1.1 webfont,
   scoped by unicode-range (the file is not subsetted). font-display: swap so figures never
   hold the paint. */
@font-face {
  font-family: "Moneygraphy-Figures";
  src: url("/fonts/Moneygraphy-Rounded.woff2") format("woff2");
  unicode-range: U+0030-0039, U+002C, U+002E, U+0025, U+20A9;
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── web-b2b raw ramp — warm neutral gray ───────────────────── */
  --gray-100: #f7f5f0;
  --gray-150: #e5e3df;
  --gray-200: #d9d6d2;
  --gray-250: #c4c0b9;
  --gray-300: #a8a39b;
  --gray-350: #8c867e;
  --gray-400: #736e68;
  --gray-500: #66625e;
  --gray-600: #54504b;
  --gray-700: #47413b;
  --gray-800: #3b3530;
  --gray-900: #292016;
  --black-100: #0d0d0d;

  /* ── web-b2b brand accents & roles ──────────────────────────── */
  --lime: #3fcf8e; /* velros green-bright — the bright accent */
  --c-green: #25bd85; /* readable role green — success */
  --accent-green: #62eeab;
  --c-blue: #27a6f7;
  --light-blue: #c8d9fa;
  --c-amber: #e0982f; /* velros amber — secondary accent */
  --c-red: #ff6a73;

  /* ── web-b2b semantic tokens (--b2b-*) ──────────────────────── */
  --b2b-canvas: #f8f1e7; /* velros paper — the page */
  --b2b-surface: #fffaf2; /* paper-warm — cards float up */
  --b2b-raised: #fffaf2;
  --b2b-soft: #eadfce; /* paper-deep — recessed */
  --b2b-ink: #123f32; /* forest ink — primary text & primary action */
  --b2b-muted: var(--gray-600); /* secondary text */
  --b2b-faint: var(--gray-400); /* metadata */
  --b2b-disabled: var(--gray-300);
  --b2b-line: var(--gray-200); /* hairline border */
  --b2b-line-soft: var(--gray-150);
  --b2b-accent: var(--lime);
  --b2b-accent-ink: var(--black-100); /* dark text on a bright-green fill */

  /* ── web-b2b type system ────────────────────────────────────── */
  --font-sans: "Pretendard Variable", Pretendard, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Playfair Display", "Noto Serif KR", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "DM Mono", "Fira Mono", monospace;
  /* The room's heading face. Not a variant of --font-serif — that token is shared verbatim
     with web-b2b (TokenParityTest) and must not move. Fallback is per-glyph: money figures
     hit the unicode-ranged Moneygraphy face first; Latin takes Playfair, the brand's headline
     voice; and 한글 — which Playfair does not carry — drops to --font-sans, so Korean headings
     render in Pretendard (never a serif/rounded display face). Headings only: body copy is
     already --font-sans. */
  --font-display: "Moneygraphy-Figures", "Playfair Display", var(--font-sans);
  --font-logo: var(--font-serif);
  --brand-serif: var(--font-serif);
  --brand-sans: var(--font-sans);
  --text-display: clamp(2.5rem, 3.85vw + 17px, 4.5rem);
  --text-h1: clamp(2.25rem, 4.2vw, 3.5rem);
  --text-h2: clamp(1.75rem, 3.9vw - 2px, 2.375rem);
  --text-h3: 28px;
  --text-h4: 22px;
  --text-lg: 20px;
  --text-body: 18px;
  --text-base: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  --fw-body: 500;
  --fw-semibold: 600;
  --fw-heading: 500;
  --leading-display: 1.1;
  --leading-heading: 1.2;
  --leading-body: 1.4;
  --tracking-display: -0.021em;
  --tracking-heading: -0.02em;
  --tracking-body: -0.0125em;

  /* ── web-b2b radius / shadow / motion ───────────────────────── */
  --r-chip: 8px;
  --r-control: 10px;
  --r-card: 16px;
  --r-panel: 24px;
  --r-pill: 50px;
  --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lift: 4px 14px 24px 3px rgba(33, 33, 33, 0.1);
  --dur-fast: 0.2s;
  --dur: 0.3s;
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  /* ═════════════════════════════════════════════════════════════
     App consumer tokens → the web-b2b contract above. Consumer NAMES are
     kept stable so every existing utility/rule keeps resolving; only the
     values behind them change to the web-b2b brand.
     ═════════════════════════════════════════════════════════════ */

  /* ── Brand palette (app names) ───────────────────────────── */
  --paper: var(--b2b-canvas);
  --paper-deep: var(--b2b-soft);
  --paper-warm: var(--b2b-surface);
  --ink: var(--b2b-ink);
  --ink-soft: var(--b2b-muted);
  --ink-muted: var(--b2b-faint);
  --line: var(--b2b-line);
  --line-strong: var(--gray-250);
  /* Bare RGB triplets behind the base colours, so the front-door's translucent
     surfaces/tints (rgb(var(--paper-rgb) / α)) flip with the theme. Dark mode
     overrides just these. */
  --paper-rgb: 255 250 242;
  --ink-rgb: 18 63 50;
  --green-rgb: 63 207 142; /* mirrors --green-bright, for rgb(var()/α) tints */
  --honey-rgb: 247 231 173;
  /* Fixed effect triplets — light emitted BY an element (glows, specular edge
     highlights, drop shadows, scrims, background veils), the same in both themes
     by design. Deliberately NOT overridden in dark: these are not surface colours
     that flip, so they stay put. Used as rgb(var(--x) / α). Migrated here from raw
     rgba() literals scattered through the front-door CSS (guard: no_raw_hex_test).
     Their light values equal --paper-rgb / --ink-rgb, but they must stay fixed —
     reusing the flipping tokens would recolour these effects in dark mode. */
  --glow-amber-pale-rgb: 255 212 142;
  --glow-amber-soft-rgb: 255 198 120;
  --glow-amber-mid-rgb: 255 182 104;
  --glow-amber-warm-rgb: 255 168 92;
  --glow-amber-deep-rgb: 255 150 70;
  --edge-highlight-rgb: 255 255 255; /* specular top-edge highlight (glass) */
  --tint-sage-rgb: 220 235 212;      /* pale-green ambient gradient glow */
  --tint-sky-rgb: 220 234 246;       /* pale-blue ambient gradient glow */
  --veil-paper-rgb: 255 250 242;     /* cream background veil — fixed, does not flip */
  --shadow-ink-rgb: 18 63 50;        /* forest drop shadow — fixed, does not flip */
  --scrim-rgb: 0 0 0;                /* modal scrim */
  /* --green is the workhorse brand accent (primary action, bubbles, nav) — forest
     ink, so light text on it stays high-contrast. --green-bright is the bright
     sparkle accent (#3fcf8e), used for highlights/tints, never behind light text. */
  --green: var(--b2b-ink);
  --on-accent: #fffaf2; /* light text on a forest/green fill — both themes */
  --green-bright: var(--lime);
  --amber: var(--c-amber);
  /* Third-party sign-in brand colours. Fixed by the provider's brand guidelines rather
     than by our theme, so they do NOT flip — but they live here, because "the value is
     someone else's to choose" is not a reason for a raw hex to sit in a stylesheet. */
  --kakao-yellow: #fee500;
  --kakao-yellow-hover: #f2d900;
  --kakao-ink: rgba(0, 0, 0, 0.85);
  /* Room aliases that read these brand roles. Kept as tokens (not raw values)
     so the room resolves them and they flip with the theme. */
  --green-deep: var(--green); /* deepest forest — room labels on light paper */
  --rust: var(--danger); /* danger tone — room-tool danger action text */
  --orange: var(--amber); /* amber accent — room status pulse */
  --moss: #dcebd4;
  --sky: #dceaf6;
  --rose: #f7ded7;
  --honey: #f7e7ad;
  --lilac: #ebe2f4;
  --shadow: rgba(18, 63, 50, 0.14);
  --ease: cubic-bezier(0.19, 1, 0.22, 1); /* the front door's signature spring */

  /* ── Interaction roles ───────────────────────────────────── */
  --nav-link: var(--b2b-muted);
  --nav-link-hover: var(--b2b-ink);

  /* ── Semantic app tokens → brand ─────────────────────────── */
  --background: var(--paper);
  --bg-elevated: var(--paper-warm);
  --bg-surface: var(--paper-deep);
  --bg-surface-hover: #e3d6c0;
  --bg-sunken: var(--paper-deep);

  --foreground: var(--ink);
  --fg-secondary: var(--ink-soft);
  --fg-muted: var(--ink-muted);

  --border: var(--line);
  --border-hover: var(--line-strong);

  --base-blue: var(--green);
  --base-blue-hover: #1b5645; /* a lifted forest for primary-button hover */
  --base-blue-light: rgba(18, 63, 50, 0.08);

  --success: var(--c-green);
  --warning: #b07a16;
  --danger: #b3433a;
  --accent-info: #3f6e9e;
  --accent-review: #b07a16;

  --overlay: rgba(18, 63, 50, 0.18);
  --bubble-user-bg: var(--green);
  --bubble-user-fg: var(--on-accent);
  --bubble-user-meta: var(--ink-muted);

  --lz-fg-dim: var(--ink-muted);
  --lz-accent: var(--green);
  --lz-accent-fg: var(--on-accent);
  --lz-border-active: var(--line-strong);
  --lz-bg-ghost: rgba(18, 63, 50, 0.02);

  /* ── Layout scaffolding ──────────────────────────────────── */
  --sidebar-width: 15.5rem;
  --content-max: 1440px;
  --grid-gap: min(2.25vw, 32px);

  /* ── z-index scale — the room's whole stacking order, in one legend ──
     Values are the ones the room already used (naming them changes no
     stacking); read top-to-bottom = back-to-front. Reach for a token, never a
     bare z-index, so the order stays legible and editable in one place. */
  --z-thread: 18; /* conversation scroller */
  --z-panel: 26; /* right panel (pins/board) */
  --z-rail: 28; /* room rail */
  --z-composer: 32; /* message composer */
  --z-dock: 34; /* prompt dock */
  --z-stage-fx: 35; /* live-stage scrim/::after */
  --z-nav: 40; /* top nav bar */
  --z-core: 41; /* the core orb / presence / voice rings */
  --z-controls: 42; /* flow + voice controls */
  --z-fab: 44; /* floating settings / tool-dock buttons */
  --z-drawer: 45; /* info drawer */
  --z-scrim: 62; /* panel scrim behind opened overlays */
  --z-overlay: 64; /* opened rail / right-panel overlays */
  --z-overlay-toggle: 66; /* the overlay's own toggle */
  --z-nav-drawer: 68; /* room-switcher drawer */
  --z-modal: 70; /* task modal */
  --z-modal-panel: 72; /* settings / room-tool modals */
  --z-modal-top: 90; /* document modal — above all */

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════════════
   Dark theme — a founder Appearance preference (set on <html data-theme="dark">
   by the front-door settings modal). web-b2b is light-only, so this is the app's
   own dark palette (forest-based). Only the base palette + RGB triplets are
   overridden; every semantic token derives from these, so the whole room flips
   from one place.
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --paper: #0e1512;
  --paper-deep: #090d0b;
  --paper-warm: #17211d;
  --paper-rgb: 30 43 37;
  --green-rgb: 63 207 142;
  --honey-rgb: 247 231 173;
  --ink: #e9f0ea;
  --ink-soft: rgba(233, 240, 234, 0.74);
  --ink-muted: rgba(233, 240, 234, 0.5);
  --ink-rgb: 205 222 212;
  --line: rgba(205, 222, 212, 0.16);
  --line-strong: rgba(205, 222, 212, 0.28);
  --green: #5f8f76;
  --on-accent: #f4f8f5;
  --green-bright: #3fcf8e;
  --nav-link: var(--ink-soft);
  --nav-link-hover: var(--green-bright);
  --base-blue-hover: #6fa588;
  --shadow: rgba(0, 0, 0, 0.5);
  --overlay: rgba(0, 0, 0, 0.55);
  --bg-surface-hover: #202d28;
  --bubble-user-fg: #f4f8f5;
  --lz-accent-fg: #f4f8f5;

  color-scheme: dark;
}