/* ==========================================================================
   InClox design tokens — v1.0 (2026-10-23)
   Single source of truth for Web dashboard, Desktop tracker (Electron),
   Mobile tracker (Capacitor) and the marketing site.
   Owner: Dsign · Brand guide: docs/design/BRAND.md

   Usage
     1. Import once:   @import "tokens.css";   (or <link rel="stylesheet">)
     2. Use semantic tokens (--ix-bg, --ix-text, --ix-primary …) in components.
        Palette tokens (--ix-teal-600 …) only for illustrations/charts.
     3. Dark theme:    <html data-theme="dark">   (or class="ix-dark")
        Auto:          <html data-theme="system">  follows prefers-color-scheme
   Fonts (self-host, OFL): fonts/inter-latin-var.woff2, fonts/outfit-latin-var.woff
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-latin-var.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Palette: Pine (brand dark) ─────────────────────────────────────── */
  --ix-pine-950: #06201C;
  --ix-pine-900: #0A2E28;
  --ix-pine-800: #0E3D35;
  --ix-pine-700: #1A4F46;
  --ix-pine-600: #2E6157;

  /* ── Palette: Teal (primary) ─────────────────────────────────────────── */
  --ix-teal-50:  #ECF8F4;
  --ix-teal-100: #D3F0E7;
  --ix-teal-200: #A7E1D0;
  --ix-teal-300: #6FCBB3;
  --ix-teal-400: #36B394;
  --ix-teal-500: #14A38A;
  --ix-teal-600: #0E8571;
  --ix-teal-700: #0B6E5E;
  --ix-teal-800: #0A574B;
  --ix-teal-900: #08463D;

  /* ── Palette: Lime (signal — "verified", highlights; never as text on light) */
  --ix-lime-50:  #F7FCE8;
  --ix-lime-100: #EDF9C9;
  --ix-lime-200: #DEF49E;
  --ix-lime-300: #C6F062;  /* brand lime */
  --ix-lime-400: #B0E03A;
  --ix-lime-500: #93C41F;
  --ix-lime-600: #739A16;
  --ix-lime-700: #587514;

  /* ── Palette: Sage neutrals ──────────────────────────────────────────── */
  --ix-gray-0:   #FFFFFF;
  --ix-gray-25:  #FAFBF8;
  --ix-gray-50:  #F5F7F2;  /* paper */
  --ix-gray-100: #ECEFEA;
  --ix-gray-200: #DDE2DC;
  --ix-gray-300: #C4CCC6;
  --ix-gray-400: #97A39D;
  --ix-gray-500: #6E7B76;
  --ix-gray-600: #515E59;
  --ix-gray-700: #3A4643;
  --ix-gray-800: #24302D;
  --ix-gray-900: #141E1C;

  /* ── Palette: Status ─────────────────────────────────────────────────── */
  --ix-green-500: #1FA36B;  --ix-green-600: #168A5B;  --ix-green-50: #E6F6EE;
  --ix-amber-500: #E8A33D;  --ix-amber-700: #9A5F06;  --ix-amber-50: #FDF3DC;
  --ix-red-500:   #E0524A;  --ix-red-600:   #C9372F;  --ix-red-50:   #FCE9E7;
  --ix-blue-500:  #3B7DDD;  --ix-blue-600:  #2563C9;  --ix-blue-50:  #E6EEFB;

  /* ── Data-viz (charts, activity bars, avatars) — colour-blind-safe order */
  --ix-chart-1: #0E8571;
  --ix-chart-2: #93C41F;
  --ix-chart-3: #3B7DDD;
  --ix-chart-4: #E8A33D;
  --ix-chart-5: #8B6FD6;
  --ix-chart-6: #E0524A;

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

  --ix-text-xs:   0.75rem;   /* 12 */
  --ix-text-sm:   0.875rem;  /* 14 */
  --ix-text-base: 1rem;      /* 16 */
  --ix-text-lg:   1.125rem;  /* 18 */
  --ix-text-xl:   1.25rem;   /* 20 */
  --ix-text-2xl:  1.5rem;    /* 24 */
  --ix-text-3xl:  1.875rem;  /* 30 */
  --ix-text-4xl:  2.5rem;    /* 40 */
  --ix-text-5xl:  3.5rem;    /* 56 */
  --ix-text-6xl:  4.5rem;    /* 72 */

  --ix-leading-tight: 1.08;
  --ix-leading-snug: 1.3;
  --ix-leading-normal: 1.55;
  --ix-tracking-display: -0.03em;
  --ix-tracking-tight: -0.015em;
  --ix-tracking-caps: 0.08em;

  --ix-weight-regular: 400;
  --ix-weight-medium: 500;
  --ix-weight-semibold: 600;
  --ix-weight-bold: 700;

  /* Tabular numbers for timers, durations, money */
  --ix-numeric: tabular-nums;

  /* ── Spacing (4px grid) ──────────────────────────────────────────────── */
  --ix-space-0: 0;
  --ix-space-1: 4px;
  --ix-space-2: 8px;
  --ix-space-3: 12px;
  --ix-space-4: 16px;
  --ix-space-5: 20px;
  --ix-space-6: 24px;
  --ix-space-8: 32px;
  --ix-space-10: 40px;
  --ix-space-12: 48px;
  --ix-space-16: 64px;
  --ix-space-20: 80px;
  --ix-space-24: 96px;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --ix-radius-xs: 6px;    /* tags, kbd */
  --ix-radius-sm: 8px;    /* inputs, small buttons */
  --ix-radius-md: 12px;   /* buttons, menus */
  --ix-radius-lg: 16px;   /* cards */
  --ix-radius-xl: 24px;   /* hero cards, modals */
  --ix-radius-full: 9999px;
  --ix-radius-icon: 22.66%; /* app-icon squircle ratio */

  /* ── Elevation ───────────────────────────────────────────────────────── */
  --ix-shadow-xs: 0 1px 2px rgba(6, 32, 28, 0.06);
  --ix-shadow-sm: 0 1px 3px rgba(6, 32, 28, 0.08), 0 1px 2px rgba(6, 32, 28, 0.04);
  --ix-shadow-md: 0 6px 16px -4px rgba(6, 32, 28, 0.10), 0 2px 4px rgba(6, 32, 28, 0.05);
  --ix-shadow-lg: 0 18px 40px -12px rgba(6, 32, 28, 0.18), 0 4px 10px rgba(6, 32, 28, 0.05);
  --ix-shadow-xl: 0 32px 70px -20px rgba(6, 32, 28, 0.28);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ix-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ix-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ix-duration-fast: 120ms;
  --ix-duration-base: 200ms;
  --ix-duration-slow: 320ms;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --ix-container: 1180px;
  --ix-sidebar-width: 248px;
  --ix-topbar-height: 60px;
  --ix-focus-ring: 0 0 0 3px rgba(20, 163, 138, 0.35);
  --ix-z-dropdown: 40;
  --ix-z-sticky: 50;
  --ix-z-modal: 80;
  --ix-z-toast: 90;

  /* ======================================================================
     SEMANTIC — LIGHT (default)
     ====================================================================== */
  color-scheme: light;
  --ix-bg:              var(--ix-gray-50);    /* app/page background */
  --ix-bg-subtle:       var(--ix-gray-100);   /* zebra rows, wells */
  --ix-surface:         var(--ix-gray-0);     /* cards, panels */
  --ix-surface-raised:  var(--ix-gray-0);     /* menus, popovers, modals */
  --ix-surface-sunken:  var(--ix-gray-25);
  --ix-surface-inverse: var(--ix-pine-950);   /* dark hero, tooltips */

  --ix-border:          rgba(6, 32, 28, 0.10);
  --ix-border-strong:   rgba(6, 32, 28, 0.18);
  --ix-divider:         rgba(6, 32, 28, 0.07);

  --ix-text:            #0B1F1C;   /* primary text, 16.7:1 on paper */
  --ix-text-secondary:  var(--ix-gray-600);   /* 6.4:1 */
  --ix-text-muted:      var(--ix-gray-500);   /* 4.6:1 — min AA for body */
  --ix-text-inverse:    #FFFFFF;
  --ix-text-link:       var(--ix-teal-700);

  --ix-primary:         var(--ix-teal-700);   /* buttons, active nav; white text 6.2:1 */
  --ix-primary-hover:   var(--ix-teal-800);
  --ix-primary-active:  var(--ix-teal-900);
  --ix-primary-subtle:  var(--ix-teal-50);
  --ix-primary-muted:   var(--ix-teal-100);
  --ix-on-primary:      #FFFFFF;

  --ix-accent:          var(--ix-lime-300);   /* "verified" chips, highlights */
  --ix-accent-hover:    var(--ix-lime-400);
  --ix-on-accent:       var(--ix-pine-950);

  --ix-success:         var(--ix-green-600);
  --ix-success-subtle:  var(--ix-green-50);
  --ix-warning:         var(--ix-amber-700);
  --ix-warning-subtle:  var(--ix-amber-50);
  --ix-danger:          var(--ix-red-600);
  --ix-danger-subtle:   var(--ix-red-50);
  --ix-info:            var(--ix-blue-600);
  --ix-info-subtle:     var(--ix-blue-50);

  /* Tracking states (desktop/mobile tracker + dashboard presence) */
  --ix-state-tracking:  var(--ix-green-500);  /* live, timer running */
  --ix-state-idle:      var(--ix-amber-500);  /* no input > threshold */
  --ix-state-paused:    var(--ix-gray-400);
  --ix-state-offline:   var(--ix-gray-300);

  /* Activity score bands (0–100) */
  --ix-activity-high:   var(--ix-teal-500);   /* ≥ 60 */
  --ix-activity-mid:    var(--ix-lime-500);   /* 30–59 */
  --ix-activity-low:    var(--ix-amber-500);  /* < 30 */

  --ix-input-bg:        var(--ix-gray-0);
  --ix-input-border:    var(--ix-gray-300);
  --ix-input-border-focus: var(--ix-teal-500);
  --ix-placeholder:     var(--ix-gray-400);

  --ix-overlay:         rgba(6, 32, 28, 0.48);
  --ix-skeleton:        var(--ix-gray-100);
}

/* ========================================================================
   SEMANTIC — DARK
   ======================================================================== */
[data-theme="dark"], .ix-dark {
  color-scheme: dark;
  --ix-bg:              #071A17;
  --ix-bg-subtle:       #0B221E;
  --ix-surface:         #0D2622;
  --ix-surface-raised:  #12302B;
  --ix-surface-sunken:  #061512;
  --ix-surface-inverse: var(--ix-gray-50);

  --ix-border:          rgba(222, 244, 236, 0.10);
  --ix-border-strong:   rgba(222, 244, 236, 0.18);
  --ix-divider:         rgba(222, 244, 236, 0.06);

  --ix-text:            #EAF2EE;
  --ix-text-secondary:  #AFC0B9;
  --ix-text-muted:      #82958E;
  --ix-text-inverse:    #0B1F1C;
  --ix-text-link:       var(--ix-teal-300);

  --ix-primary:         var(--ix-teal-400);
  --ix-primary-hover:   var(--ix-teal-300);
  --ix-primary-active:  var(--ix-teal-200);
  --ix-primary-subtle:  rgba(20, 163, 138, 0.14);
  --ix-primary-muted:   rgba(20, 163, 138, 0.24);
  --ix-on-primary:      var(--ix-pine-950);

  --ix-accent:          var(--ix-lime-300);
  --ix-accent-hover:    var(--ix-lime-200);
  --ix-on-accent:       var(--ix-pine-950);

  --ix-success:         #4FCB93;
  --ix-success-subtle:  rgba(31, 163, 107, 0.16);
  --ix-warning:         #F2BE6B;
  --ix-warning-subtle:  rgba(232, 163, 61, 0.16);
  --ix-danger:          #F07B74;
  --ix-danger-subtle:   rgba(224, 82, 74, 0.16);
  --ix-info:            #7FAAF0;
  --ix-info-subtle:     rgba(59, 125, 221, 0.16);

  --ix-state-offline:   #3C4E49;
  --ix-input-bg:        #0A201C;
  --ix-input-border:    rgba(222, 244, 236, 0.16);
  --ix-placeholder:     #6A7D77;
  --ix-overlay:         rgba(0, 0, 0, 0.6);
  --ix-skeleton:        #14302B;

  --ix-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ix-shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.5);
  --ix-shadow-lg: 0 20px 44px -12px rgba(0, 0, 0, 0.6);
  --ix-shadow-xl: 0 32px 70px -20px rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    color-scheme: dark;
    --ix-bg: #071A17; --ix-bg-subtle: #0B221E; --ix-surface: #0D2622; --ix-surface-raised: #12302B;
    --ix-surface-sunken: #061512; --ix-surface-inverse: var(--ix-gray-50);
    --ix-border: rgba(222, 244, 236, 0.10); --ix-border-strong: rgba(222, 244, 236, 0.18); --ix-divider: rgba(222, 244, 236, 0.06);
    --ix-text: #EAF2EE; --ix-text-secondary: #AFC0B9; --ix-text-muted: #82958E; --ix-text-inverse: #0B1F1C; --ix-text-link: var(--ix-teal-300);
    --ix-primary: var(--ix-teal-400); --ix-primary-hover: var(--ix-teal-300); --ix-primary-active: var(--ix-teal-200);
    --ix-primary-subtle: rgba(20, 163, 138, 0.14); --ix-primary-muted: rgba(20, 163, 138, 0.24); --ix-on-primary: var(--ix-pine-950);
    --ix-success: #4FCB93; --ix-success-subtle: rgba(31, 163, 107, 0.16); --ix-warning: #F2BE6B; --ix-warning-subtle: rgba(232, 163, 61, 0.16);
    --ix-danger: #F07B74; --ix-danger-subtle: rgba(224, 82, 74, 0.16); --ix-info: #7FAAF0; --ix-info-subtle: rgba(59, 125, 221, 0.16);
    --ix-state-offline: #3C4E49; --ix-input-bg: #0A201C; --ix-input-border: rgba(222, 244, 236, 0.16); --ix-placeholder: #6A7D77;
    --ix-overlay: rgba(0, 0, 0, 0.6); --ix-skeleton: #14302B;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --ix-duration-fast: 0ms; --ix-duration-base: 0ms; --ix-duration-slow: 0ms; }
}