/* ============================================================================
 * Misson Design Tokens — single source of truth.
 *
 * Locked decisions (CRM redesign 2026):
 *   - Typography:  Inter (system fallback for offline)
 *   - Brand mark:  #AC1442 (logo + brand-touchpoints only)
 *   - UI primary:  #AC1442 (buttons, focus, tabs, selected state)
 *     (2026-07: indigo #4F46E5 korvattu brändivärillä — yksi paletti)
 *
 * Naming:
 *   --crm-brand-*       brand identity (logo, brand kortit) — käytä säästäen
 *   --crm-ui-*          interaktioväri — painikkeet, tab-underline, focus
 *   --accent-N          data-visualisoinnin paletti (sky/emerald/amber/rose…)
 *   --ink-N             tekstit ja neutraalit (Tailwind slate -rampu)
 *   --state-*           semanttiset tila-värit (success/warning/danger/info)
 *
 * Apps can adopt incrementally — these tokens never depend on anything
 * else and are safe to load before Bootstrap.
 * ========================================================================== */

:root {
  /* ---- Brand identity --------------------------------------------------- */
  --crm-brand:        #AC1442;
  --crm-brand-tint:   #FDE7EC;
  --crm-brand-ink:    #7A0E2E;

  /* ---- UI primary (interaction) ---------------------------------------- */
  --crm-ui-primary:        #AC1442;
  --crm-ui-primary-tint:   #FDE7EC;
  --crm-ui-primary-ink:    #7A0E2E;
  --crm-ui-primary-ring:   rgba(172, 20, 66, 0.35);

  /* ---- Data-viz accents (use for charts, sparklines, accents) ---------- */
  --accent-1: #AC1442;  /* brand crimson */
  --accent-2: #0EA5E9;  /* sky     */
  --accent-3: #10B981;  /* emerald */
  --accent-4: #F59E0B;  /* amber   */
  --accent-5: #EF4444;  /* rose    */
  --accent-6: #8B5CF6;  /* violet  */

  --accent-1-tint: rgba(172, 20, 66, 0.12);
  --accent-2-tint: rgba(14, 165, 233, 0.12);
  --accent-3-tint: rgba(16, 185, 129, 0.12);
  --accent-4-tint: rgba(245, 158, 11, 0.12);
  --accent-5-tint: rgba(239, 68, 68, 0.12);
  --accent-6-tint: rgba(139, 92, 246, 0.12);

  /* ---- Neutrals (slate rampu) ------------------------------------------ */
  --ink-900: #0F172A;
  --ink-800: #1E293B;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748B;
  --ink-400: #94A3B8;
  --ink-300: #CBD5E1;
  --ink-200: #E2E8F0;
  --ink-100: #F1F5F9;
  --ink-50:  #F8FAFC;

  /* ---- Surfaces -------------------------------------------------------- */
  --surface:     #FFFFFF;
  --canvas:      #F5F7FB;
  --canvas-elev: #FFFFFF;

  /* ---- Semantic states ------------------------------------------------- */
  --state-success:      var(--accent-3);
  --state-success-tint: var(--accent-3-tint);
  --state-warning:      var(--accent-4);
  --state-warning-tint: var(--accent-4-tint);
  --state-danger:       var(--accent-5);
  --state-danger-tint:  var(--accent-5-tint);
  --state-info:         var(--accent-2);
  --state-info-tint:    var(--accent-2-tint);

  /* TP-7.5 a11y: darker "strong" variants for cases that need WCAG AA
     contrast -- colored TEXT on a light tint, or a solid fill behind white
     text. The base accents (#EF4444 / #10B981) fail 4.5:1 in those uses.
     danger #B91C1C (red-700): white=6.5:1, on danger-tint=5.7:1.
     success #047857 (emerald-700): white=5.9:1, on success-tint=4.6:1. */
  --state-danger-strong:  #B91C1C;
  --state-success-strong: #047857;

  /* ---- Geometry -------------------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-3: 0 18px 40px rgba(15, 23, 42, 0.08), 0 6px 12px rgba(15, 23, 42, 0.04);

  --ring-focus: 0 0 0 3px var(--crm-ui-primary-ring);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, "Cascadia Code",
                  Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.8125rem;   /* 13 */
  --fs-base: 0.9375rem;   /* 15 — body default */
  --fs-md:   1rem;        /* 16 */
  --fs-lg:   1.125rem;    /* 18 */
  --fs-xl:   1.5rem;      /* 24 */
  --fs-2xl:  2rem;        /* 32 — section h1 */
  --fs-3xl:  2.5rem;      /* 40 — hero numbers */

  --lh-tight:  1.25;
  --lh-snug:   1.4;
  --lh-normal: 1.6;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  --tracking-tight: -0.01em;
  --tracking-caps:   0.08em;

  /* ---- Spacing (4 px base) --------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  120ms;
  --dur-med:   220ms;
  --dur-slow:  400ms;

  /* ---- Layout ---------------------------------------------------------- */
  --sidenav-w:            220px;
  --sidenav-w-collapsed:   56px;
  --topnav-h:              56px;
  --bottom-nav-h:          56px;
  --page-padding-x:        32px;
  --page-padding-x-mob:    16px;

  /* ---- Z-index scale (named to avoid magic numbers) -------------------- */
  --z-sidenav:    100;
  --z-topnav:     110;
  --z-dropdown:   200;
  --z-tooltip:    300;
  --z-modal-bg:   900;
  --z-modal:      910;
  --z-toast:      1000;
}

/* Dark mode — kaksi tapaa kytkeä:
 *   1. OS:n prefers-color-scheme: dark + data-allow-dark="true" → auto
 *   2. data-allow-dark="true" alone → force (käyttäjän manuaalinen valinta
 *      ⌘/Ctrl+Shift+D -näppäimellä, säilyy localStorage'ssa)
 */
:root[data-allow-dark="true"] {
  --canvas:      #0B1220;
  --canvas-elev: #111827;
  --surface:     #111827;

  --ink-900: #F8FAFC;
  --ink-800: #F1F5F9;
  --ink-700: #E2E8F0;
  --ink-600: #CBD5E1;
  --ink-500: #94A3B8;
  --ink-400: #64748B;
  --ink-300: #475569;
  --ink-200: #334155;
  --ink-100: #1E293B;
  --ink-50:  #0F172A;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 18px 40px rgba(0, 0, 0, 0.5);

  --crm-brand-tint:      rgba(172, 20, 66, 0.18);
  --crm-ui-primary-tint: rgba(172, 20, 66, 0.18);
}

/* Dark via OS-preference: automaattisesti kytkeytyy päälle vain jos
   data-allow-dark on _ei_ asetettu "false":ksi (ts. käyttäjä ei ole
   manuaalisesti torjunut sitä). */
@media (prefers-color-scheme: dark) {
  :root:not([data-allow-dark="false"]) {
    --canvas:      #0B1220;
    --canvas-elev: #111827;
    --surface:     #111827;

    --ink-900: #F8FAFC;
    --ink-800: #F1F5F9;
    --ink-700: #E2E8F0;
    --ink-600: #CBD5E1;
    --ink-500: #94A3B8;
    --ink-400: #64748B;
    --ink-300: #475569;
    --ink-200: #334155;
    --ink-100: #1E293B;
    --ink-50:  #0F172A;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-3: 0 18px 40px rgba(0, 0, 0, 0.5);

    --crm-brand-tint:      rgba(172, 20, 66, 0.18);
    --crm-ui-primary-tint: rgba(172, 20, 66, 0.18);
  }
}

/* Respect users who prefer reduced motion — disable transitions site-wide.
   Specific opt-in animations (e.g. KPI count-up) should query this too. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}