/* ============================================================
   BossYou — design tokens · single source of truth
   Web (apps/web) imports these; the mobile app mirrors them.
   Everything else (app.css, components, screens) references these
   vars — never hard-code a brand value. New brand values become a
   token HERE first, then get referenced downstream.
   ============================================================ */
:root {
  /* ---- Brand (official kit names — design/plan/, slide 03) ---- */
  --hotsand: #eadcd1; /* "Areia Quente" · warm surface · sidebar, auth sheet */
  --pinknude: #c49ba3; /* "Rosa Nude Fechado" · accent · strokes, sheen, focus.
                          Decorative only on light surfaces (fails AA as text) */
  --bordeaux: #6a1e3a; /* "Bordeaux Profundo" · primary action · buttons, links */
  --bordeaux-deep: #7d2a4a; /* derived (not in kit) · primary gradient light stop */
  --bordeaux-deeper: #4e142b; /* derived (not in kit) · landing surfaces */
  --bordeaux-deepest: #4a1228; /* derived (not in kit) · landing        */
  --ink: #1f1f1f; /* "Preto Suave" · text primary · headings, icons     */
  --sub: #6e6a7c; /* muted · secondary text, placeholders           */
  --on-primary: #fdf2f5; /* text/icons on a bordeaux fill           */
  --accent: var(
    --pinknude
  ); /* secondary brand accent · decorative fills, icon
                                tiles, accent strokes. White-label workspaces
                                override this (e.g. Transduson → Roxo). Default
                                aliases PinkNude — extends the system, never
                                replaces a brand token. */

  /* ---- App surfaces ---- */
  --paper: #f5eee7; /* app background                */
  --card: #ffffff; /* cards, panels, table rows      */
  --line: #e7dace; /* hairline borders               */
  --line-strong: #c7b8ab; /* stronger hairline · breadcrumb separator */
  --lane: #efe7de; /* board columns                  */
  --nav-ink: #57505a; /* inactive nav text           */
  --nav-label: #6b6258; /* nav group / eyebrow labels (AA on hotsand) */
  --surface-input: #fcfaf8; /* input / textarea / composer field bg */
  --surface-thead: #fbf6f1; /* table header row bg    */
  --surface-tint: #f0e7dc; /* warm chip / tag / status tint */
  --track: #efe3d7; /* progress-bar track bg          */
  --switch-off: #d9cbbf; /* toggle switch (off) bg     */

  /* ---- Data-viz + semantic (functional only) ---- */
  --up: #5b7a63; /* positive · sage         */
  --warn: #a5603f; /* attention · terracotta */
  --rose: #9c5b67; /* photo/foto label        */
  --slate: #8a8391; /* neutral avatar / mark  */
  --prio-low: #b9ada2; /* low-priority marker */
  --toast-ok: #9ec3ab; /* toast success glyph */

  /* ---- On-ink surface family ----
     For the report cover and the dark benchmark section, which sit on the
     --ink ground. Alphas (not fixed hues) so they hold when a white-label
     theme swaps --ink for its own charcoal. */
  --on-ink: #f7f2ed; /* text/icons on --ink                */
  --on-ink-sub: rgba(247, 242, 237, 0.66); /* muted text on --ink  */
  --surface-ink: rgba(255, 255, 255, 0.06); /* elevated card on --ink */
  --line-ink: rgba(255, 255, 255, 0.14); /* hairline on --ink      */

  /* ---- Data-viz categorical scale ----
     For series/slices that carry NO semantic meaning (post formats,
     competitor profiles). Never reuse --up / --warn here: a "positive
     green" slice claims a judgement the data does not make. 1–3 alias
     brand tokens, so a white-label workspace re-skins them for free;
     4–6 are the only genuinely new hues and every theme overrides them. */
  --viz-1: var(--bordeaux);
  --viz-2: var(--pinknude);
  --viz-3: var(--ink);
  --viz-4: #a4718a; /* mid plum      */
  --viz-5: #8a5a63; /* muted rose-brown */
  --viz-6: #d8c5b2; /* pale sand     */

  /* ---- Tint scale · brand colors at alpha ---- */
  --tint-bord-1: rgba(106, 30, 58, 0.05); /* subtle hover / wash        */
  --tint-bord-2: rgba(106, 30, 58, 0.07); /* hover                      */
  --tint-bord-3: rgba(106, 30, 58, 0.11); /* selected / active tint     */
  --tint-bord-4: rgba(106, 30, 58, 0.16); /* strong / emphasised active */
  --tint-up: rgba(91, 122, 99, 0.14); /* positive tint       */
  --tint-warn: rgba(165, 96, 63, 0.13); /* attention tint    */
  --tint-rose: rgba(196, 155, 163, 0.24); /* pink tint       */
  --tint-sub: rgba(110, 106, 124, 0.12); /* neutral muted tint */
  --tint-ink: rgba(0, 0, 0, 0.05); /* neutral count-chip / hover */

  /* ---- Media placeholder gradients ---- */
  --media-design: linear-gradient(135deg, #ecdcd2, #d9bfc4);
  --media-video: linear-gradient(135deg, #ddcfc4, #bcc6b7);
  --media-photo: linear-gradient(135deg, #e6d3c9, #cfa9ab);
  --thumb-approve: linear-gradient(135deg, #e9d9cf, #d8bfc3);

  /* ---- Overlays ---- */
  /* Near-opaque scrim for the full-screen media viewer. The modal scrim
     (rgba(31,20,17,.42)) is deliberately lighter: it keeps the page
     legible behind a dialog; media has to read against black. */
  --scrim-media: rgba(20, 12, 10, 0.94);
  /* Control chips on the viewer. Deliberately DARK, not a white tint: the
     controls float over arbitrary media, and a light chip loses its white
     glyph against a bright image. Dark holds AA on any background. */
  --viewer-chrome: rgba(20, 12, 10, 0.7);
  --viewer-chrome-hover: rgba(20, 12, 10, 0.86);

  /* ---- Focus ---- */
  --focus-color: var(--bordeaux); /* branded focus outline color        */
  --focus-ring: 0 0 0 3px rgba(196, 155, 163, 0.55); /* soft pink field ring */

  /* ---- Radii ---- */
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 2px rgba(31, 20, 15, 0.04), 0 12px 30px -24px rgba(31, 20, 15, 0.4);
  --shadow-pop: 0 18px 44px -18px rgba(31, 20, 15, 0.5);

  /* ---- Spacing scale (8pt base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- Typography ---- */
  --font-sans: 'Lexend Deca', system-ui, sans-serif;
  /* Brand serif (kit wordmark/display voice) · landing + auth display type,
     wordmark text, watermark letterforms ONLY — app UI stays --font-sans.
     Pages that use it must also load the Playfair Display Google Font. */
  --font-display: 'Playfair Display', Georgia, serif;

  /* Type scale — every size the UI uses is tokenized. Numeric names
     preserve exact px (no visual drift); semantic aliases stay for
     display/h1/h2/body/label/caption references. */
  --text-40: 40px;
  --text-32: 32px;
  --text-30: 30px;
  --text-27: 27px;
  --text-25: 25px;
  --text-22: 22px;
  --text-20: 20px;
  --text-19: 19px;
  --text-18: 18px;
  --text-17: 17px;
  --text-16: 16px;
  --text-15: 15px;
  --text-145: 14.5px;
  --text-14: 14px;
  --text-135: 13.5px;
  --text-13: 13px;
  --text-125: 12.5px;
  --text-12: 12px;
  --text-115: 11.5px;
  --text-11: 11px;
  --text-105: 10.5px;
  --text-10: 10px;

  --text-display: var(--text-40);
  --text-h1: var(--text-30);
  --text-h2: var(--text-16);
  --text-body: var(--text-14);
  --text-label: var(--text-13);
  --text-caption: var(--text-12);

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

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.16s;
  --dur-mid: 0.4s;
  --dur-slow: 0.55s;

  font-family: var(--font-sans);
}