/* ============================================================
   Klientio design tokens
   The single source of truth for colour, type, space and size.
   Import this anywhere — the app, a marketing page, a one-off
   artefact — and never write a raw hex value again.

   Reference: design/DESIGN-SYSTEM.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- surfaces & ink ---------------------------------- */
  --k-paper:        #F8F9FB;
  --k-surface:      #FFFFFF;
  --k-surface-2:    #F0F2F5;
  --k-rule:         #E2E4E8;
  --k-rule-strong:  #CFD2D8;

  --k-ink:          #2A2E36;
  --k-ink-2:        #6B7079;
  --k-ink-3:        #969AA2;
  --k-ink-4:        #B4B8BF;

  /* ---- semantic accents --------------------------------
     oklch L 0.62 / C 0.14 — hue 55 / 250 / 155.
     Same weight, different meaning. Never add a fourth.     */
  --k-signal:        #B96A2A;   /* going quiet, overdue, at risk */
  --k-signal-deep:   #8F4F1C;
  --k-signal-bg:     #F9F0E4;

  --k-action:        #2C5AA8;   /* the one thing to do about it */
  --k-action-hover:  #234A8C;
  --k-action-press:  #1C3D75;
  --k-action-bg:     #EAF1FA;
  --k-action-border: #C7D8F0;

  --k-good:          #2E9668;
  --k-good-bg:       #E6F4EE;

  --k-danger:        #B0432E;
  --k-danger-text:   #8F3A28;
  --k-danger-bg:     #FCF2F0;

  --k-on-accent:     #FFFFFF;   /* text on a filled action */

  /* ---- type -------------------------------------------- */
  --k-font:      'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --k-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --k-text-display:  700 24px/1.15 var(--k-font);
  --k-text-title:    600 21px/1.2  var(--k-font);
  --k-text-subtitle: 600 19px/1.25 var(--k-font);
  --k-text-strong:   600 13.5px/1.4 var(--k-font);
  --k-text-body:     400 13.5px/1.5 var(--k-font);
  --k-text-small:    400 12.5px/1.45 var(--k-font);
  --k-text-evidence: 400 11px/1.35 var(--k-font-mono);
  --k-text-figure:   500 13px/1.3  var(--k-font-mono);
  --k-text-label:    500 10px/1.3  var(--k-font-mono);

  --k-tracking-display: -0.02em;
  --k-tracking-title:   -0.015em;
  --k-tracking-label:    0.09em;

  /* ---- space ------------------------------------------- */
  --k-space-1: 4px;
  --k-space-2: 8px;
  --k-space-3: 12px;
  --k-space-4: 16px;
  --k-space-6: 24px;
  --k-space-8: 32px;

  /* ---- radius ------------------------------------------ */
  --k-radius-chip:    3px;
  --k-radius-control: 4px;
  --k-radius-inner:   5px;
  --k-radius-card:    6px;
  --k-radius-panel:   8px;

  /* ---- sizing ------------------------------------------ */
  --k-control-row:     30px;
  --k-control:         32px;
  --k-control-primary: 36px;
  --k-control-touch:   44px;   /* mobile minimum — never smaller */

  --k-row-grid:   46px;
  --k-row-quiet:  58px;
  --k-row-task:   52px;
  --k-row-header: 34px;

  /* ---- borders, focus, elevation ------------------------ */
  --k-border:       1px solid var(--k-rule);
  --k-border-focus: 1.5px solid var(--k-action);
  --k-focus-ring:   0 0 0 3px rgba(44, 90, 168, 0.12);
  --k-focus-ring-filled: 0 0 0 3px rgba(44, 90, 168, 0.28);
  /* Shadows are for toasts only. This is an instrument, not a dashboard. */
  --k-shadow-toast: 0 4px 16px -6px rgba(22, 26, 34, 0.32);
}

/* ============================================================
   Dark. Only tokens are redefined — never a component rule, or
   the value will not apply in the un-stamped "system" state.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --k-paper:       #15181D;
    --k-surface:     #1D2127;
    --k-surface-2:   #252A31;
    --k-rule:        #2E333C;
    --k-rule-strong: #3B424D;

    --k-ink:         #E8EAEE;
    --k-ink-2:       #A6ACB6;
    --k-ink-3:       #7C828C;
    --k-ink-4:       #656B75;

    --k-signal:      #E0A264;
    --k-signal-deep: #EFC79A;
    --k-signal-bg:   #2A2118;

    --k-action:        #7DA2E0;
    --k-action-hover:  #93B3E9;
    --k-action-press:  #6890D2;
    --k-action-bg:     #1B2432;
    --k-action-border: #2E4160;

    --k-good:      #5FBF97;
    --k-good-bg:   #14291F;

    --k-danger:      #E08475;
    --k-danger-text: #EFA598;
    --k-danger-bg:   #2C1A17;

    --k-on-accent:   #15181D;

    --k-focus-ring:        0 0 0 3px rgba(125, 162, 224, 0.20);
    --k-focus-ring-filled: 0 0 0 3px rgba(125, 162, 224, 0.36);
    --k-shadow-toast:      0 4px 16px -6px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --k-paper:       #15181D;
  --k-surface:     #1D2127;
  --k-surface-2:   #252A31;
  --k-rule:        #2E333C;
  --k-rule-strong: #3B424D;

  --k-ink:         #E8EAEE;
  --k-ink-2:       #A6ACB6;
  --k-ink-3:       #7C828C;
  --k-ink-4:       #656B75;

  --k-signal:      #E0A264;
  --k-signal-deep: #EFC79A;
  --k-signal-bg:   #2A2118;

  --k-action:        #7DA2E0;
  --k-action-hover:  #93B3E9;
  --k-action-press:  #6890D2;
  --k-action-bg:     #1B2432;
  --k-action-border: #2E4160;

  --k-good:      #5FBF97;
  --k-good-bg:   #14291F;

  --k-danger:      #E08475;
  --k-danger-text: #EFA598;
  --k-danger-bg:   #2C1A17;

  --k-on-accent:   #15181D;

  --k-focus-ring:        0 0 0 3px rgba(125, 162, 224, 0.20);
  --k-focus-ring-filled: 0 0 0 3px rgba(125, 162, 224, 0.36);
  --k-shadow-toast:      0 4px 16px -6px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   Ground rules. Everything else is a component's business.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--k-paper);
  color: var(--k-ink);
  font: var(--k-text-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--k-action); text-underline-offset: 2px; }
a:hover { color: var(--k-action-hover); }

:focus-visible { outline: none; box-shadow: var(--k-focus-ring); border-radius: var(--k-radius-control); }

/* Digits that sit in columns must line up. */
.k-figure, .k-evidence { font-variant-numeric: tabular-nums; }
.k-evidence { font: var(--k-text-evidence); color: var(--k-ink-2); }
.k-label {
  font: var(--k-text-label);
  letter-spacing: var(--k-tracking-label);
  text-transform: uppercase;
  color: var(--k-ink-3);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}