/* MethodSense design tokens.
   Lifted from the design system project (corporate-design-system-0f6118fd).
   Base hexes come from the brand PowerPoint template; never round or invent. */

/* ---------- colour ---------- */
:root {
  --ink-900: #1f2933;
  --ink-700: #51616e;
  --ink-600: #5b6b7c;
  --ink-500: #7a8896;
  --slate-600: #475569;
  --line-200: #e2e8f0;
  --surface-100: #eef2f6;
  --surface-50: #f7f9fb;
  --white: #ffffff;

  --orange-500: #f7941d;
  --orange-700: #a35d0e;
  --orange-900: #6b3f09;

  --red-600: #c8102e;
  --red-800: #900c21;
  --red-950: #4e0e18;
  --red-50: #fbe5e8;

  --blue-700: #2f5d8a;
  --blue-800: #1f3f5f;
  --blue-950: #162c43;
  --blue-50: #e8f1f8;

  --ll-grey: #939598;

  --brand-primary: var(--orange-500);
  --brand-primary-deep: var(--orange-700);
  --brand-primary-darkest: var(--orange-900);
  --brand-secondary: var(--slate-600);
  --brand-regulatory: var(--red-600);
  --brand-tint: var(--surface-100);
  --brand-tint-strong: var(--line-200);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-500);
  /* Deep, not bright: the bright gold is 2.1:1 on white and on the cream and
     grey surfaces, which fails AA for text this size. Dark bands override it
     back to the bright gold, where that one has the contrast instead. */
  --text-eyebrow: var(--brand-primary-deep);
  --text-inverse: var(--white);
  --text-on-brand: var(--ink-900);

  --surface-page: var(--white);
  --surface-card: var(--surface-50);
  --surface-inset: var(--surface-100);
  --surface-tint: var(--surface-100);
  --surface-ink: var(--ink-900);

  --border-subtle: var(--line-200);
  --border-strong: var(--ink-500);
  --border-accent: var(--brand-primary);

  --link: var(--orange-700);
  --link-hover: var(--ink-900);
  --focus-ring: var(--orange-500);

  --state-error: #b6383e;
  --state-success: #2f7a4d;
  --state-info: var(--blue-700);
}

/* Theme scopes. Apply to any container: <div data-theme="luminlogic-blue">.
   Only the brand layer moves; ink and neutrals hold across all three. */
[data-theme="luminlogic-blue"] {
  --brand-primary: var(--blue-700);
  --brand-primary-deep: var(--blue-800);
  --brand-primary-darkest: var(--blue-950);
  --brand-secondary: var(--orange-500);
  --brand-tint: var(--blue-50);
  --brand-tint-strong: #cfe1f0;
  --surface-tint: var(--blue-50);
  --link: var(--blue-700);
  --focus-ring: var(--blue-700);
  --text-on-brand: var(--white);
  --text-eyebrow: var(--brand-primary-deep);
}

[data-theme="luminlogic-red"] {
  --brand-primary: var(--red-600);
  --brand-primary-deep: var(--red-800);
  --brand-primary-darkest: var(--red-950);
  --brand-secondary: var(--orange-500);
  --brand-tint: var(--red-50);
  --brand-tint-strong: #f4c3ca;
  --surface-tint: var(--red-50);
  --link: var(--red-600);
  --focus-ring: var(--red-600);
  --text-on-brand: var(--white);
  --text-eyebrow: var(--brand-primary-deep);
}

/* ---------- typography ---------- */
:root {
  --font-core: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

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

  --text-hero: 64px;
  --text-display: 48px;
  --text-display-sm: 40px;
  --text-h1: 32px;
  --text-h2: 26px;
  --text-h3: 22px;
  --text-h4: 20px;
  --text-lead: 20px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 13px;
  --text-micro: 11px;

  --leading-tight: 1.05;
  --leading-snug: 1.15;
  --leading-heading: 1.25;
  --leading-body: 1.55;
  --leading-loose: 1.7;

  --tracking-hero: -0.02em;
  --tracking-stat: -0.018em;
  --tracking-title: 0;
  --tracking-eyebrow: 0.27em;
  --tracking-eyebrow-tight: 0.25em;
  --tracking-eyebrow-wide: 0.5em;
  --tracking-label: 0.14em;
  --tracking-body: 0;
}

/* ---------- spacing, layout, radii ---------- */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 120px;

  --gutter-page: 24px;   /* shared with staging3.luminlogic.com */
  --page-max: 1240px;    /* shared with staging3.luminlogic.com (--site-max) */
  --measure-prose: 68ch;
  --col-gap: 48px;
  --section-y: 96px;
  --section-y-tight: 64px;

  /* The brand is square-cornered. Radius is reserved for pills and avatars. */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --rule-accent-w: 38px;
  --rule-accent-h: 4px;
  --card-accent-h: 6px;
  --hairline: 1px;
}

/* ---------- effects ---------- */
:root {
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(31, 41, 51, 0.05), 0 10px 30px rgba(31, 41, 51, 0.06);
  --shadow-raised: 0 2px 4px rgba(31, 41, 51, 0.06), 0 18px 44px rgba(31, 41, 51, 0.10);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  --gradient-cover: linear-gradient(180deg, #f9a03c 0%, #f9a03c 45%, #fbc98a 75%, #fde5c6 100%);
  --gradient-cover-blue: linear-gradient(180deg, #35648f 0%, #35648f 45%, #8fb0cc 75%, #d3e2ee 100%);
  --gradient-cover-red: linear-gradient(180deg, #d01732 0%, #d01732 45%, #e9808f 75%, #f6d0d6 100%);
  --scrim-ink: linear-gradient(180deg, rgba(31, 41, 51, 0) 0%, rgba(31, 41, 51, 0.72) 70%, rgba(31, 41, 51, 0.88) 100%);
  --scrim-ink-side: linear-gradient(90deg, rgba(31, 41, 51, 0.88) 0%, rgba(31, 41, 51, 0.55) 55%, rgba(31, 41, 51, 0) 100%);

  /* Short, flat, no bounce. Compliance software does not spring. */
  --dur-instant: 90ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --transition-control: color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);

  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --overlay-ink: rgba(31, 41, 51, 0.6);
}