/* =============================================================================
   BUSINESS OS — DESIGN TOKENS
   Staged for: business-os/apps/web/design-system/tokens.css
   Owner: CI lead · 2026-09-02

   Plain CSS custom properties on purpose. This file works unchanged whether the
   scaffold lands on Tailwind, CSS Modules, or plain CSS — so the token layer is
   never blocked on, and never has to be rewritten after, that decision.
   If Tailwind is chosen, point tailwind.config theme values at these variables
   rather than duplicating them; the variables stay the single source of truth.

   Three rules this file follows:
   1. Semantic names, not literal ones. Components reference --surface-raised,
      never --gray-100, so a palette change is one edit here.
   2. Every colour is defined in the bare :root light block first, then
      REDEFINED under dark. A colour that only exists inside a dark block
      renders as one theme's text on the other theme's background.
   3. Dark mode responds to BOTH an explicit [data-theme] attribute and the OS
      preference, with the explicit choice winning in both directions.
   ============================================================================= */

:root {
  /* ---------- Palette primitives (referenced only by the semantic layer) ---- */
  --c-slate-50:  #f7f8fa;
  --c-slate-100: #eef1f5;
  --c-slate-200: #dfe4ec;
  --c-slate-300: #c5cddb;
  --c-slate-400: #93a0b4;
  --c-slate-500: #64748b;
  --c-slate-600: #4a5568;
  --c-slate-700: #333e4f;
  --c-slate-800: #1f2733;
  --c-slate-900: #131922;
  --c-slate-950: #0b0f15;

  /* Accent: a business tool, not a consumer app. Confident, not loud. */
  --c-accent-400: #4f8ef7;
  --c-accent-500: #2f6feb;
  --c-accent-600: #1f55c4;
  --c-accent-700: #17429a;

  --c-green-500:  #16a34a;
  --c-green-600:  #12833c;
  --c-amber-500:  #d97706;
  --c-amber-600:  #b45309;
  --c-red-500:    #dc2626;
  --c-red-600:    #b91c1c;
  --c-violet-500: #7c3aed;
  --c-violet-600: #6428c8;

  /* ---------- Surfaces ---------------------------------------------------- */
  --surface-app:      var(--c-slate-50);   /* page background            */
  --surface-raised:   #ffffff;             /* cards, panels              */
  --surface-sunken:   var(--c-slate-100);  /* wells, table headers       */
  --surface-overlay:  #ffffff;             /* modals, popovers           */
  --surface-inverse:  var(--c-slate-900);

  /* ---------- Text -------------------------------------------------------- */
  --text-primary:   var(--c-slate-900);
  --text-secondary: var(--c-slate-600);
  --text-muted:     var(--c-slate-500);
  --text-inverse:   #ffffff;
  --text-accent:    var(--c-accent-600);

  /* ---------- Lines ------------------------------------------------------- */
  --line-subtle: var(--c-slate-200);
  --line-strong: var(--c-slate-300);
  --line-accent: var(--c-accent-500);

  /* ---------- Semantic state ---------------------------------------------- */
  --state-success:    var(--c-green-600);
  --state-success-bg: #e8f6ed;
  --state-warning:    var(--c-amber-600);
  --state-warning-bg: #fdf3e3;
  --state-danger:     var(--c-red-600);
  --state-danger-bg:  #fdeceb;
  --state-info:       var(--c-accent-600);
  --state-info-bg:    #e9f0fd;
  --state-neutral:    var(--c-slate-600);
  --state-neutral-bg: var(--c-slate-100);

  /* ---------- AI / agent semantics ----------------------------------------
     The differentiator. Competitive research (WAR_ROOM matrices/ACTIVATION.md)
     found NO major competitor evidences permissioned, audited, approvable
     autonomous AI action. An owner must always be able to tell, at a glance:
     did the system DO this, or is it ASKING to?
     Therefore agent state is a first-class token group, never ad-hoc styling. */
  --agent-accent:        var(--c-violet-600);  /* "this came from the AI"     */
  --agent-accent-bg:     #f2ecfd;
  --agent-proposed:      var(--c-accent-600);  /* awaiting a human decision   */
  --agent-proposed-bg:   #e9f0fd;
  --agent-approved:      var(--c-green-600);   /* human said yes              */
  --agent-approved-bg:   #e8f6ed;
  --agent-rejected:      var(--c-red-600);     /* human said no               */
  --agent-rejected-bg:   #fdeceb;
  --agent-auto:          var(--c-amber-600);   /* acted under standing rule   */
  --agent-auto-bg:       #fdf3e3;

  /* ---------- Typography ---------------------------------------------------
     System stack by default: zero webfont latency on the owner's first load,
     which matters because activation speed is the product thesis. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --text-xs:   0.75rem;   /* 12px — metadata, timestamps            */
  --text-sm:   0.8125rem; /* 13px — labels, table cells             */
  --text-base: 0.9375rem; /* 15px — body. Denser than consumer 16px */
  --text-md:   1.0625rem; /* 17px — card titles                    */
  --text-lg:   1.375rem;  /* 22px — section headings               */
  --text-xl:   1.75rem;   /* 28px — page titles                    */
  --text-2xl:  2.25rem;   /* 36px — stat figures                   */

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-tight: -0.01em;
  --tracking-wide:   0.04em;  /* uppercase labels only */

  /* ---------- Spacing — 4px base ------------------------------------------ */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---------- Radii ------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 9999px;

  /* ---------- Elevation --------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 2px 6px -1px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 12px 24px -8px rgba(16, 24, 40, 0.14);
  --shadow-focus: 0 0 0 3px rgba(47, 111, 235, 0.32);

  /* ---------- Motion ------------------------------------------------------
     Deliberately fast. This is a tool someone uses all day; animation is
     feedback, not decoration. Nothing here exceeds 200ms. */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --duration-instant: 90ms;
  --duration-fast:   140ms;
  --duration-normal: 200ms;

  /* ---------- Layout ------------------------------------------------------ */
  --sidebar-width:            248px;
  --sidebar-width-collapsed:  60px;
  --topbar-height:            56px;
  --content-max:             1180px;
  --z-sticky:  100;
  --z-overlay: 400;
  --z-modal:   500;
  --z-toast:   600;
}

/* ---------- Dark: OS preference, unless an explicit light choice wins ------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-app:     var(--c-slate-950);
    --surface-raised:  var(--c-slate-900);
    --surface-sunken:  #10161f;
    --surface-overlay: var(--c-slate-800);
    --surface-inverse: var(--c-slate-100);

    --text-primary:   #eef2f8;
    --text-secondary: var(--c-slate-300);
    --text-muted:     var(--c-slate-400);
    --text-inverse:   var(--c-slate-900);
    --text-accent:    var(--c-accent-400);

    --line-subtle: #232c39;
    --line-strong: #33404f;

    --state-success-bg: #10251a;
    --state-warning-bg: #251a0d;
    --state-danger-bg:  #2a1414;
    --state-info-bg:    #111f38;
    --state-neutral-bg: #1a212b;

    --agent-accent:      #a482f5;
    --agent-accent-bg:   #1d1630;
    --agent-proposed:    var(--c-accent-400);
    --agent-proposed-bg: #111f38;
    --agent-approved:    #35c46c;
    --agent-approved-bg: #10251a;
    --agent-rejected:    #f2635f;
    --agent-rejected-bg: #2a1414;
    --agent-auto:        #e39a3a;
    --agent-auto-bg:     #251a0d;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px -1px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-focus: 0 0 0 3px rgba(79, 142, 247, 0.45);
  }
}

/* ---------- Dark: explicit choice, wins over a light OS -------------------- */
:root[data-theme="dark"] {
  --surface-app:     var(--c-slate-950);
  --surface-raised:  var(--c-slate-900);
  --surface-sunken:  #10161f;
  --surface-overlay: var(--c-slate-800);
  --surface-inverse: var(--c-slate-100);

  --text-primary:   #eef2f8;
  --text-secondary: var(--c-slate-300);
  --text-muted:     var(--c-slate-400);
  --text-inverse:   var(--c-slate-900);
  --text-accent:    var(--c-accent-400);

  --line-subtle: #232c39;
  --line-strong: #33404f;

  --state-success-bg: #10251a;
  --state-warning-bg: #251a0d;
  --state-danger-bg:  #2a1414;
  --state-info-bg:    #111f38;
  --state-neutral-bg: #1a212b;

  --agent-accent:      #a482f5;
  --agent-accent-bg:   #1d1630;
  --agent-proposed:    var(--c-accent-400);
  --agent-proposed-bg: #111f38;
  --agent-approved:    #35c46c;
  --agent-approved-bg: #10251a;
  --agent-rejected:    #f2635f;
  --agent-rejected-bg: #2a1414;
  --agent-auto:        #e39a3a;
  --agent-auto-bg:     #251a0d;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 6px -1px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-focus: 0 0 0 3px rgba(79, 142, 247, 0.45);
}

/* =============================================================================
   COMPATIBILITY ALIASES
   The hosted enquiry form (core/leads/embed/form.html) already ships its own
   small variable set. These aliases map that vocabulary onto the semantic
   tokens above, so that file can adopt this system by DELETING its :root and
   dark-mode blocks and changing nothing else — no markup edits, no rewrite.

   Adopting also fixes a real bug in that file: its dark-mode block sets
   `--muted:#a49`, which expands to #aa4499 — magenta — where light mode uses
   grey #666. Muted text currently turns purple in dark mode. The alias below
   resolves to a correct neutral in both themes.

   Note on accent: form.html uses green #0f6c4e; this system's accent is blue
   #2f6feb. That is a BRAND decision, not a technical one, so it is not silently
   overridden here — --accent is aliased to the design-system accent, and if the
   product's brand colour is the green, change --c-accent-500 in ONE place above
   and every component follows. Flagged for Jony/DIR rather than decided here.
   ============================================================================= */
:root {
  --fg:        var(--text-primary);
  --muted:     var(--text-muted);
  --bg:        var(--surface-app);
  --card:      var(--surface-raised);
  --border:    var(--line-subtle);
  --accent:    var(--c-accent-500);
  --accent-fg: #ffffff;
  --danger:    var(--state-danger);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* Focus is never removed — only restyled. An owner-operator tool must be
   fully keyboard-navigable. */
:focus-visible {
  outline: 2px solid var(--line-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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