/* ============================================================
   Montar CRM — design tokens
   Inherited from the montardigital.com system so the product
   reads as ours: warm paper, warm near-black ink, Hanken
   Grotesk. --accent is overwritten at boot from the client
   config, which is the only thing that changes per client.
   ============================================================ */

:root {
  color-scheme: light;

  --paper:    #f5f4f0;
  --paper-2:  #ecebe4;
  --card:     #ffffff;
  --card-2:   #f6f5f1;
  --ink:      #17150f;
  --ink-soft: #615c53;
  --ink-faint:#756f64;   /* clears 4.5:1 on --card and --card-2 */
  --hair:     #e5e2d9;
  --hair-2:   #d6d2c7;

  /* Two-role accent, same discipline as the marketing site:
     --accent carries identity, --action is reserved for the one
     thing on screen that wants a click. */
  --accent:      #175570;
  --accent-tint: color-mix(in oklab, var(--accent) 12%, var(--card));
  --accent-deep: color-mix(in oklab, var(--accent) 82%, #000);
  /* Text sitting on --accent-tint. It has to mix toward the background
     of the current theme, not always toward black — mixing toward black
     on a dark surface produces 1:1 contrast. */
  --accent-ink:  color-mix(in oklab, var(--accent) 82%, #000);
  --action:      #c95026;
  --action-tint: color-mix(in oklab, var(--action) 12%, var(--card));
  --gold:        #b3852c;
  --gold-tint:   color-mix(in oklab, var(--gold) 14%, var(--card));
  --go:          #2f7d54;
  --go-tint:     color-mix(in oklab, var(--go) 12%, var(--card));
  --muted-tint:  var(--paper-2);

  /* Chart colours are fixed, not derived from --accent. A client with
     an orange brand must not repaint the data. Validated for CVD and
     contrast against the card surface in both themes. */
  --chart-1: #2b86b0;
  --chart-2: #cf5a29;
  --chart-grid: color-mix(in oklab, var(--ink) 10%, transparent);
  --chart-fill: color-mix(in oklab, var(--chart-1) 16%, transparent);

  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --text-micro:   0.7rem;
  --text-eyebrow: 0.76rem;
  --text-sm:      0.86rem;
  --text-base:    0.95rem;
  --text-lede:    clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  --text-h2:      clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem);
  --text-figure:  clamp(2.6rem, 1.8rem + 3.4vw, 4.4rem);

  --radius:    14px;
  --radius-sm: 9px;
  --radius-xs: 6px;

  --duration: 220ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --shadow-sm: 0 10px 22px -18px color-mix(in oklab, var(--ink) 55%, transparent);
  --shadow:    0 28px 54px -40px color-mix(in oklab, var(--ink) 62%, transparent);
  --shadow-lift: 0 18px 34px -22px color-mix(in oklab, var(--ink) 50%, transparent);

  --bar-h: 60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:    #14140f;
    --paper-2:  #1b1a14;
    --card:     #1f1e17;
    --card-2:   #24231b;
    --ink:      #f1efe6;
    --ink-soft: #a8a294;
    --ink-faint:#9a9487;
    --hair:     #322f26;
    --hair-2:   #3d3930;
    --accent:      #4f9dbd;
    --accent-tint: color-mix(in oklab, var(--accent) 22%, var(--card));
    --accent-ink:  color-mix(in oklab, var(--accent) 62%, #fff);
    --action:      #ec7a4f;
    --gold:        #dcab5b;
    --go:          #5fae7c;
    --shadow-sm: 0 10px 22px -18px rgba(0,0,0,0.62);
    --shadow:    0 30px 58px -40px rgba(0,0,0,0.76);
    --shadow-lift: 0 18px 34px -22px rgba(0,0,0,0.6);
    /* Dark steps are chosen against the dark surface, not flipped. */
    --chart-1: #3f9dc4;
    --chart-2: #e06a38;
    --chart-grid: color-mix(in oklab, var(--ink) 14%, transparent);
    --chart-fill: color-mix(in oklab, var(--chart-1) 20%, transparent);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#14140f; --paper-2:#1b1a14; --card:#1f1e17; --card-2:#24231b;
  --ink:#f1efe6; --ink-soft:#a8a294; --ink-faint:#9a9487;
  --hair:#322f26; --hair-2:#3d3930;
  --accent:#4f9dbd; --action:#ec7a4f; --gold:#dcab5b; --go:#5fae7c;
  --accent-tint: color-mix(in oklab, var(--accent) 22%, var(--card));
  --accent-ink:  color-mix(in oklab, var(--accent) 62%, #fff);
  --shadow-sm: 0 10px 22px -18px rgba(0,0,0,0.62);
  --shadow:    0 30px 58px -40px rgba(0,0,0,0.76);
  --shadow-lift: 0 18px 34px -22px rgba(0,0,0,0.6);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}