/* LAC design tokens — THE single source of truth for color, type, radius,
 * shadow, motion, and density across every LAC surface.
 *
 * Documented in /design.md (the design contract). Iterated in the design
 * studio (design/studio — `npm run dev`, http://localhost:5199).
 *
 * Structure: `:root` holds the base system (the product/portal dialect is the
 * base because both apps already read these exact var names). Plane and world
 * blocks override only what legitimately differs:
 *   .plane-marketing — landing + blog (Satoshi/Cabinet Grotesk, pastel cards)
 *   .plane-product   — customer portal + internal app shell (inherits base)
 *   .world-internal  — the internal expert dialect (wireframe monochrome, volt)
 *
 * Migration target: app/src/styles/base.css:root, internal-app/src/styles.css:root,
 * and landing/index.html:root all re-point here (see design.md §Migration).
 * No hex value is born anywhere else. */

:root {
  /* ------------------------------------------------------------ type ---- */
  --font-body: 'Manrope Variable', -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: var(--font-body);
  /* Serif locked: Newsreader (founder call 2026-07-04). Wordmark + editorial only. */
  --font-serif: 'Newsreader Variable', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ------------------------------------------------------------ inks ---- */
  --ink: #171a1f;
  --ink-deep: #16203a;
  --ink-soft: #6e6e73;
  --ink-tertiary: #86868b;

  /* ------------------------------------------------- surfaces & lines --- */
  --paper: #ffffff;
  --surface: #f0f5f7; /* cool paper — founder call 2026-07-05 (was warm #f6f4ef) */
  --portal-surface: #f0f5f7;
  --mist: rgba(255, 255, 255, 0.72);
  --line: #e2e8ec; /* hairlines follow the cool field */
  --line-strong: #111111; /* black outlines carry the wireframe frames */

  /* ---------------------------------------------------------- accent ---- */
  /* One brand accent — pastel periwinkle, FINAL customer-facing accent
     (founder lock 2026-07-04). Fills for active/selected states and key
     actions; BLACK ink sits on top. Internal world = volt. */
  --accent: #a8bdff; /* periwinkle — FINAL customer-facing accent (founder lock 2026-07-04) */
  --accent-strong: #8fa9fb;
  --accent-ink: #000000; /* black ink on the pastel accent */
  --accent-deep: #4a63d4; /* text-weight periwinkle for light surfaces */
  --accent-tint: color-mix(in srgb, var(--accent) 16%, white);
  /* Secondary accent — vivid modern orange, tiny doses only ("Needs context").
     Refreshed 2026-07-04: the old tangerine #e07a2f read as dated. */
  --accent-warm: #ff6b2c;
  --accent-warm-soft: #ffeee4;

  /* ------------------------------------------------------- semantics ---- */
  /* Colour only where it carries meaning. Never chrome. */
  --ok: #16b364; /* bright modern green (founder 2026-07-04; was #0f7b51) */
  --ok-soft: #e4f8ee;
  --warn: #d97706;
  --warn-soft: #fcf2e2;
  --info: #477beb;
  --info-soft: #eef2f7;
  --review: #fff2c2;
  --danger: #d93a2f;
  --danger-soft: #fdeaea;
  /* Internal-app aliases (balanced/negative in ledgers). */
  --pos: #16b364;
  --neg: #b42318;

  /* ------------------------------------------------- books grid glue ---- */
  /* Horizontal hairlines only, no vertical rules; selection is a soft blue
     wash with NO edges (highlight only — settled taste call 2026-06-18). */
  --grid-line: #d7dfe4;
  --select-bg: color-mix(in srgb, var(--accent) 10%, white);
  --select-bg-strong: color-mix(in srgb, var(--accent) 18%, white);

  /* ------------------------------------------------------------ radii --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------- shadows --- */
  /* Depth returns (founder 2026-07-05): soft material shadow UNDER the bold
     wireframe frames + liquid glass on floating surfaces — 3d, not flat. */
  --shadow-card: 0 1px 2px rgba(23, 26, 31, 0.05), 0 8px 24px rgba(23, 26, 31, 0.06);
  --shadow-pop: 0 18px 52px rgba(24, 32, 28, 0.16);
  --shadow-glass:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -18px 34px rgba(238, 242, 238, 0.24),
    0 18px 52px rgba(24, 32, 28, 0.16);
  --shadow-soft: none;
  /* Card edge — the depth-mode dial flips shadow vs border emphasis. */
  --card-border: 1px solid var(--line-strong);

  /* ------------------------------------------------------------ focus --- */
  --focus: var(--accent-deep);

  /* ----------------------------------------------------------- charts --- */
  /* Palette + semantics (revenue green, expense rose, VAT amber). JS reads
     these via getComputedStyle — never hard-code chart colors in components. */
  --chart-1: #b9adf9; /* lavender (accent kin) */
  --chart-2: #f5a08c; /* soft coral — expenses (fresher than the old red) */
  --chart-3: #7fcfae; /* mint — revenue (fresher than the old green) */
  --chart-4: #f6c66d; /* honey — VAT */
  --chart-5: #8cc7e8; /* sky */
  --chart-6: #d9a8e3; /* orchid */
  --chart-7: #9fb7c9; /* steel */
  --chart-8: #cdbfae; /* sand */
  --chart-revenue: var(--chart-3);
  --chart-expense: var(--chart-2);
  --chart-profit: var(--chart-1);
  --chart-vat: var(--chart-4);
  --chart-vat-receivable: var(--chart-5);
  --chart-grid: #e2e9ed;
  --chart-axis: #93a1ab;
  --chart-text: #5c6a73;

  /* ----------------------------------------------------------- motion --- */
  /* One easing family. --motion-scale multiplies every duration (0 = off);
     prefers-reduced-motion is always respected regardless. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-scale: 2; /* founder lock 2026-07-04 — the choreography is judged at 2× */
  --dur-fast: calc(150ms * var(--motion-scale));
  --dur-med: calc(280ms * var(--motion-scale));
  --dur-slow: calc(600ms * var(--motion-scale));

  /* ---------------------------------------------------------- density --- */
  --row-h: 44px;
  --cell-pad-x: 10px;
  --space-unit: 8px;
}

/* ======================================================================= */
/* Marketing plane — landing page + blog. Warmer, editorial, pastel play.  */
/* ======================================================================= */
.plane-marketing {
  /* Fonts follow the global tokens (two-scope model, 2026-07-04). */
  /* Inks re-tuned with the living-ledger landing (2026-07-08): a hint
     warmer black, cool purple-grey secondary. */
  --ink: #191913;
  --ink-soft: #606077;
  --ink-tertiary: #a1a1a6;

  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 28px;
  --radius-xl: 34px;

  /* The landing's 3D '+'-mark scenery colour (2026-07-08). */
  --field: #2e46ff;

  /* Landing-only extras: status greens + the pastel data-card set (the
     blog still uses the pastels; the landing itself moved to glass cards). */
  --green: #1aa251;
  --green-ink: #16823f;
  --amber: #d97706;
  --c1: #e26365;
  --c2: #e4a4e8;
  --c3: #f3b264;
  --c4: #95c47e;
  --c5: #f8d765;
  --c6: #78acb6;
}

/* ======================================================================= */
/* Product plane — the app shells. Inherits the base system.              */
/* ======================================================================= */
.plane-product {
  /* Deliberately empty: the base IS the product dialect. The block exists so
     studio per-plane overrides have a stable hook. */
  --font-heading: var(--font-body);
}

/* ======================================================================= */
/* Internal world — SAME components and tokens as the product base;        */
/* only the accent changes (volt, fill-only, black ink). 2026-07-04.        */
/* ======================================================================= */
.world-internal {
  /* ONLY the accent differs from the product base (founder call 2026-07-04):
     volt, fill-only, black ink on it. Volt fails the 3:1 indicator minimum on
     white, so the focus ring stays black. Everything else inherits. */
  --accent: #c6ff3d;
  --accent-strong: #b3ef1f;
  --accent-deep: #5b7a00;
  --accent-ink: #000000;
  --accent-tint: color-mix(in srgb, var(--accent) 24%, white);
  --focus: #0a0a0a;

  /* Aliases the ported internal CSS still reads. */
  --ink-strong: var(--ink);
  --error: var(--neg);
  --font-sans: var(--font-body);
}