/*
 * Design tokens, read off the Figma file's active variable mode.
 *
 * The file carries two modes. The default mode is teal (#0f7769); every
 * frame in the design renders in the second, purple mode. The rendered
 * frames are the visual target, so the purple values are the ones here.
 * A handful of layers in the drill-down are still pinned to the teal mode
 * -- those are leftovers, not a second status colour, and are normalised
 * to the purple set below.
 *
 * Names match the Figma variable names so a token can be traced back to
 * the design without guessing.
 */
:root {
  /* ---- brand ------------------------------------------------------- */
  --accent:            #6c30ec;   /* action-primary, link, status/ok-text */
  --accent-hover:      #5d27d4;
  --accent-tint:       #f3f0fb;   /* surface-tint: scope card, active nav  */
  --accent-chip:       #e2ddf5;   /* surface-sunk: chips, table head       */
  --accent-on:         #ffffff;   /* text-on-accent                        */

  /* ---- surfaces ---------------------------------------------------- */
  --bg:                #f8f8fc;
  --surface:           #ffffff;
  --surface-sunk:      #e2ddf5;
  --surface-tint:      #f3f0fb;

  /* ---- text -------------------------------------------------------- */
  --text:              #2e313b;
  --text-muted:        #4b4f5e;   /* Label/xs -- darker than secondary,
                                     which is how the design has it       */
  --text-secondary:    #6b7280;
  --link:              var(--accent);

  /* ---- lines ------------------------------------------------------- */
  --border:            #d4d6db;
  --border-soft:       #e2ddf5;

  /* ---- status ------------------------------------------------------ */
  --ok-bg:             #f3f0fb;
  --ok-text:           #6c30ec;
  --warn-bg:           #fef3c7;
  --warn-text:         #764b10;
  --danger-bg:         #fee2e2;
  --danger-text:       #6c221a;
  --info-bg:           #e6edf8;
  --info-text:         #183d6e;

  /* ---- ACOS verdict ------------------------------------------------ */
  --acos-good:         #6c30ec;
  --acos-watch:        #764b10;
  --acos-high:         #6c221a;

  /* ---- chart series ------------------------------------------------ */
  --series-1:          #8b5cf6;
  --series-2:          #a1372b;
  --series-3:          #285ea4;
  --series-4:          #b0721c;
  --series-5:          #0ea894;
  --grid:              #eceaf4;

  /* ---- radii ------------------------------------------------------- */
  --radius-sm:         6px;
  --radius-md:         8px;
  --radius-lg:         12px;
  --radius-pill:       999px;

  /* ---- type -------------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono",
               "JetBrains Mono", Menlo, Consolas, monospace;

  /* Display/3xl */   --fs-display: 28px;  --lh-display: 34px;
  /* Heading/2xl */   --fs-h2:      22px;  --lh-h2:      28px;
  /* Heading/xl  */   --fs-h3:      17px;  --lh-h3:      24px;
  /* Heading/lg  */   --fs-h4:      15px;  --lh-h4:      22px;
  /* Body/base   */   --fs-base:    14px;  --lh-base:    20px;
  /* Body/sm     */   --fs-sm:      13px;  --lh-sm:      18px;
  /* Label/xs    */   --fs-xs:      12px;  --lh-xs:      16px;
                      --ls-xs:      0.72px;

  /* ---- chrome ------------------------------------------------------ */
  --topnav-h:          59px;
  --sidenav-w:         248px;
  --shadow-panel:      0 12px 32px rgba(46, 49, 59, .16);
  --shadow-pop:        0 6px 20px rgba(46, 49, 59, .14);
}