/* definitions/design-tokens.css
   ────────────────────────────────────────────────────────────
   Capion CRM design tokens.
   Authored by: UX Designer agent
   Status: locked. Modules consume only — never override.
   See D008 in DECISIONS.md.
   ────────────────────────────────────────────────────────────
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,300;9..144,0,400;9..144,0,500;9..144,1,300;9..144,1,400;9..144,1,500&family=Manrope:wght@300;400;500;600;700&display=swap');

:root {
  /* ─── Palette: Nordic, warm, restrained ─── */
  --c-bg:          #F5F1E8;     /* canvas */
  --c-bg-warm:     #EFE9DC;     /* hover surface on canvas */
  --c-surface:     #FFFDF8;     /* card */
  --c-surface-2:   #FAF6EC;     /* recessed surface inside a card */
  --c-ink:         #1E2419;     /* primary text */
  --c-ink-soft:    #4A4D42;     /* secondary text */
  --c-ink-mute:    #8A8678;     /* tertiary text, meta */
  --c-line:        #E5DECC;     /* default border */
  --c-line-soft:   #EFE8D6;     /* very faint divider */

  --c-sage:        #01474A;     /* primary accent (2026-06: dark teal-green) */
  --c-sage-deep:   #013436;     /* hover / pressed */
  --c-sage-soft:   #C5D2BE;
  --c-sage-tint:   #E2EAD9;     /* success bg */

  --c-beige:       #D9C9A6;     /* warm accent */
  --c-terracotta:  #B07556;     /* warning / risk */
  --c-amber:       #C99A4A;     /* caution */
  --c-cream:       #F8F2E2;     /* inverse on ink */
  --c-rose:        #B57878;     /* error */

  /* ─── Extended sage scale (50 → 700) ─── */
  --c-sage-50:    #F1F5EE;
  --c-sage-100:   #E2EAD9;      /* alias of --c-sage-tint */
  --c-sage-200:   #C5D2BE;      /* alias of --c-sage-soft */
  --c-sage-300:   #A6BB9C;
  --c-sage-400:   #88A380;
  --c-sage-500:   #01474A;      /* alias of --c-sage (primary) */
  --c-sage-600:   #033E40;
  --c-sage-700:   #013436;      /* alias of --c-sage-deep */

  /* ─── Warm beige scale ─── */
  --c-beige-50:   #FAF6EC;
  --c-beige-100:  #F5EFDC;
  --c-beige-200:  #EFE8D6;
  --c-beige-300:  #E5DECC;
  --c-beige-400:  #D9C9A6;      /* alias of --c-beige */
  --c-beige-500:  #C9B689;
  --c-beige-600:  #A8946A;
  --c-beige-700:  #7E6E4F;

  /* ─── Ink (text) scale ─── */
  --c-ink-900:    #1E2419;      /* alias of --c-ink */
  --c-ink-700:    #4A4D42;      /* alias of --c-ink-soft */
  --c-ink-500:    #6B6A5C;
  --c-ink-400:    #8A8678;      /* alias of --c-ink-mute */
  --c-ink-300:    #A8A595;
  --c-ink-200:    #C9C5B5;
  --c-ink-100:    #E5DECC;

  /* ─── Surface scale (paper / card / elevated) ─── */
  --c-surface-paper:    #F5F1E8;   /* alias of --c-bg */
  --c-surface-recessed: #FAF6EC;   /* alias of --c-surface-2 */
  --c-surface-card:     #FFFDF8;   /* alias of --c-surface */
  --c-surface-elevated: #FFFEFB;
  --c-surface-inverse:  #1E2419;

  /* ─── Border tokens ─── */
  --c-border:           #E5DECC;   /* alias of --c-line */
  --c-border-soft:      #EFE8D6;   /* alias of --c-line-soft */
  --c-border-strong:    #D9C9A6;
  --c-border-focus:     #6F8A6A;

  /* ─── Status semantics ─── */
  --c-success:       #4F6B4D;
  --c-success-bg:    #E2EAD9;
  --c-success-fg:    #4F6B4D;

  --c-warning:       #C99A4A;
  --c-warning-bg:    #F5E5D2;
  --c-warning-fg:    #8A6420;

  --c-danger:        #B07556;
  --c-danger-bg:     #F0DCD0;
  --c-danger-fg:     #8A4A2E;

  --c-info:          #6F8A6A;
  --c-info-bg:       #F1F5EE;
  --c-info-fg:       #4F6B4D;

  --c-muted:         #8A8678;
  --c-muted-bg:      #EFE9DC;
  --c-muted-fg:      #4A4D42;

  /* ─── Type ─── */
  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'Manrope', -apple-system, sans-serif;

  --t-display:     400 38px/1.05 var(--font-display);
  --t-h1:          400 28px/1.15 var(--font-display);
  --t-h2:          500 19px/1.2  var(--font-display);
  --t-body:        400 14px/1.55 var(--font-body);
  --t-meta:        500 11.5px/1.4 var(--font-body);
  --t-label:       600 10.5px/1.2 var(--font-body);
  --letter-tight:  -0.02em;
  --letter-wide:   0.1em;

  /* ─── Spacing scale (consistent 4px base) ─── */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;

  /* ─── 8-pt spacing scale (rem-based, semantic aliases) ─── */
  --space-0:    0;
  --space-0-25: 0.25rem;   /*  4px */
  --space-0-5:  0.5rem;    /*  8px */
  --space-1:    1rem;      /* 16px */
  --space-1-5:  1.5rem;    /* 24px */
  --space-2:    2rem;      /* 32px */
  --space-3:    3rem;      /* 48px */
  --space-4:    4rem;      /* 64px */
  --space-6:    6rem;      /* 96px */
  --space-8:    8rem;      /* 128px */

  /* ─── Radii ─── */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 10px;
  --r-5: 14px;
  --r-pill: 999px;

  /* ─── Radius scale (semantic aliases) ─── */
  --radius-xs:   4px;     /* alias of --r-1 */
  --radius-sm:   6px;     /* alias of --r-2 */
  --radius-md:   8px;     /* alias of --r-3 */
  --radius-lg:  10px;     /* alias of --r-4 */
  --radius-xl:  14px;     /* alias of --r-5 */
  --radius-2xl: 20px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ─── Shadows ─── */
  --sh-1: 0 1px 0 rgba(40,46,30,.03), 0 2px 8px rgba(40,46,30,.04);
  --sh-2: 0 1px 2px rgba(40,46,30,.04), 0 8px 24px rgba(40,46,30,.06);
  --sh-focus: 0 0 0 3px rgba(111,138,106,.25);

  /* ─── Shadow scale (semantic aliases) ─── */
  --shadow-none: none;
  --shadow-sm:   0 1px 0 rgba(40,46,30,.03), 0 2px 8px rgba(40,46,30,.04);
  --shadow-md:   0 1px 2px rgba(40,46,30,.04), 0 8px 24px rgba(40,46,30,.06);
  --shadow-lg:   0 4px 12px rgba(40,46,30,.06), 0 16px 40px rgba(40,46,30,.10);
  --shadow-xl:   0 8px 24px rgba(40,46,30,.10), 0 24px 64px rgba(40,46,30,.14);
  --shadow-inset: inset 0 1px 2px rgba(40,46,30,.06);
  --shadow-focus: 0 0 0 3px rgba(111,138,106,.25);
  --shadow-focus-danger: 0 0 0 3px rgba(181,120,120,.28);

  /* ─── Motion ─── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast: 0.15s;
  --d-med:  0.25s;

  /* ─── Transition tokens ─── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --transition-fast: 0.15s var(--ease-standard);
  --transition-base: 0.25s var(--ease-standard);
  --transition-slow: 0.4s  var(--ease-standard);

  /* ─── Z-index scale ─── */
  --z-base:     0;
  --z-raised:   1;
  --z-sticky:   100;
  --z-nav:      200;
  --z-dropdown: 300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
  --z-tooltip:  700;
}

/* ─── Reduced-motion preference ─── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0.001s;
    --d-med:  0.001s;
    --transition-fast: 0.001s var(--ease-standard);
    --transition-base: 0.001s var(--ease-standard);
    --transition-slow: 0.001s var(--ease-standard);
  }
}

/* ─── Global focus-visible default ─── */
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

/* ─── Screen-reader-only utility ─── */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Base reset (minimal) */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font: var(--t-body);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

/* === BEGIN engagement-archetype tokens ===
   Accent palette for the engagement-archetype matrix and the
   "CB Overview" / "Denna vecka" views. These colors are used
   exclusively to convey workflow state (late, waiting on client,
   review, at Skatteverket, done, not started) on archetype blocks,
   stripes, and chips. They are NOT general-purpose palette colors
   and must not leak into other surfaces. Pair each fg with its -bg.
*/
:root {
  --c-arch-late:           #E24B4A;
  --c-arch-late-bg:        #FBEAEA;
  --c-arch-wait-client:    #378ADD;
  --c-arch-wait-client-bg: #E4F0FA;
  --c-arch-review:         #D4537E;
  --c-arch-review-bg:      #FAE6EE;
  --c-arch-at-skv:         #EF9F27;
  --c-arch-at-skv-bg:      #FCF1DC;
  --c-arch-done:           #97C459;
  --c-arch-done-bg:        #EEF6E3;
  --c-arch-not-started:    #D3D1C7;
  --c-arch-not-started-bg: #F2F1ED;
}
/* === END engagement-archetype tokens === */