/*
 * Design tokens of Valere CRM — the single source of every visual value on this site.
 *
 * Every color, font, radius, shadow, size and duration on the pages is read from here in the
 * browser; no page and no component writes a value of its own. Two themes are two value sets of the
 * same names: the light values are the default, the dark ones apply when the device asks for dark
 * and the reader has not chosen, or when the reader chose dark (data-theme on <html>, nav.js).
 *
 * The light values are the design concept's blue (Apiko's concept of 7 October 2026, as the pilot held it
 * under ADR-0042: Tailwind blue and zinc), chosen on 2026-11-03 over the pilot's current green (SC-017,
 * superseding SC-002); each line names the pilot token it mirrors. Status and function colours are the
 * pilot's, unchanged. The names here
 * are the showcase's semantic ones (what a value is for), so the frame reads them; the pilot's own
 * names are in the comments. The dark set, the info tone and every line without a pilot name are
 * proposed (SC-002): the pilot has no dark theme. The Foundations step finishes the scale tokens.
 */
:root {
  --font-sans: 'Inter', system-ui, sans-serif; /* pilot font-sans */
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* pilot font-mono */

  /* Surfaces */
  --color-page: #ffffff; /* pilot gray-50 (concept: white content) */
  --color-surface: #ffffff;
  --color-surface-muted: #f4f4f5; /* pilot gray-100 */
  --color-surface-inverted: #18181b; /* pilot gray-900 */
  --color-overlay: rgb(24 24 27 / 0.5);

  /* Text */
  --color-foreground: #18181b; /* pilot gray-900 */
  --color-muted: #52525b; /* pilot gray-600 */
  --color-subtle: #6b6b74; /* pilot gray-500 */
  --color-inverted: #ffffff;

  /* Borders and focus */
  --color-default: #e4e4e7; /* pilot gray-200 */
  --color-emphasis: #d4d4d8; /* pilot gray-300 */
  --color-ring: #3b82f6; /* pilot focus */

  /* Brand */
  --color-primary: #2563eb; /* pilot primary-600 */
  --color-primary-hover: #1d4ed8; /* pilot primary-700 */
  --color-primary-foreground: #ffffff;
  --color-primary-soft: #dbeafe; /* pilot primary-100 */
  --color-primary-strong: #1e3a8a; /* pilot primary-900 */
  --color-primary-accent: #93c5fd; /* pilot primary-300 */
  --color-primary-deep: #1e3a8a; /* pilot primary-900 */

  /* The shell of the design concept: an off-white sidebar, the item on show in a grey fill with dark text */
  --color-sidebar: #f9f9fa;
  --color-nav-active: #ececee;
  --color-nav-active-text: #18181b;

  /* Feedback */
  --color-danger: #dc2626; /* pilot crit-mark */
  --color-danger-hover: #b91c1c;
  --color-danger-foreground: #ffffff;
  --color-danger-soft: #fee2e2; /* pilot crit-tint */
  --color-danger-text: #b91c1c; /* pilot crit-text */
  --color-success: #16a34a; /* pilot good-mark */
  --color-success-foreground: #ffffff;
  --color-success-soft: #dcfce7; /* pilot good-tint */
  --color-success-text: #15803d; /* pilot good-text */
  --color-warning: #f59e0b; /* pilot warn-mark */
  --color-warning-foreground: #1d2724;
  --color-warning-soft: #fef3c7; /* pilot warn-tint */
  --color-warning-text: #b45309; /* pilot warn-text */
  --color-info: #3a4756; /* proposed: the Legal slate (SC-002) */
  --color-info-foreground: #ffffff; /* proposed: the Legal slate (SC-002) */
  --color-info-soft: #eef1f5; /* proposed: the Legal slate (SC-002) */
  --color-info-text: #3a4756; /* proposed: the Legal slate (SC-002) */

  /* Function owners */
  --color-fn-backoffice: #5a3e99; /* pilot fn-backoffice */
  --color-fn-backoffice-tint: #eee9f8; /* pilot fn-backoffice-tint */
  --color-fn-land: #0b6b6f; /* pilot fn-land */
  --color-fn-land-tint: #ddf0f0; /* pilot fn-land-tint */
  --color-fn-partnerships: #9b2c6b; /* pilot fn-partnerships */
  --color-fn-partnerships-tint: #f8e5ef; /* pilot fn-partnerships-tint */
  --color-fn-construction: #5e6b12; /* pilot fn-construction */
  --color-fn-construction-tint: #eef1d6; /* pilot fn-construction-tint */
  --color-fn-legal: #3a4756; /* pilot fn-legal */
  --color-fn-legal-tint: #eef1f5; /* pilot fn-legal-tint */

  /* Categories of the domain (proposed, Foundations step; plans/foundations.md). Each is a text and a tint
     drawn from the tokens above, so the dark theme follows on its own; never hue alone — a label or an icon
     always stands beside the colour. */
  --color-health-good-text: var(--color-success-text); /* Deal Health 70 and above (pilot HealthChip) */
  --color-health-good-tint: var(--color-success-soft);
  --color-health-fair-text: var(--color-warning-text); /* 40–69 */
  --color-health-fair-tint: var(--color-warning-soft);
  --color-health-poor-text: var(--color-danger-text); /* below 40 */
  --color-health-poor-tint: var(--color-danger-soft);
  --color-grade-exceptional-text: var(--color-primary-strong);
  --color-grade-exceptional-tint: var(--color-primary-soft);
  --color-grade-good-text: var(--color-success-text);
  --color-grade-good-tint: var(--color-success-soft);
  --color-grade-acceptable-text: var(--color-info-text);
  --color-grade-acceptable-tint: var(--color-info-soft);
  --color-grade-heavy-text: var(--color-warning-text); /* Land Heavy */
  --color-grade-heavy-tint: var(--color-warning-soft);
  --color-grade-weak-text: var(--color-danger-text); /* Weak, Unviable, Overpriced */
  --color-grade-weak-tint: var(--color-danger-soft);
  --color-stage-text: var(--color-primary-strong); /* a stage chip (pilot: primary-700 on primary-100) */
  --color-stage-tint: var(--color-primary-soft);
  --color-stage-done-text: var(--color-success-text); /* Completed */
  --color-stage-done-tint: var(--color-success-soft);
  --color-stage-dead-text: var(--color-muted); /* Dead */
  --color-stage-dead-tint: var(--color-surface-muted);
  --color-chart-actual: var(--color-primary); /* a chart: the figure */
  --color-chart-forecast: var(--color-primary-accent); /* the forecast or the target */
  --color-chart-track: var(--color-surface-muted); /* the empty part of a bar */

  /* Elevation */
  --shadow-card: 0 1px 2px rgb(24 24 27 / 0.05); /* pilot shadow-card */
  --shadow-overlay: 0 8px 24px rgb(24 24 27 / 0.12); /* pilot shadow-popover */

  /* The Logo page shows every mark on fixed grounds, whatever the theme on show: light, dark and the brand.
     These stay the same in both themes on purpose (the light and dark values of page, ink and brand). */
  --logo-ground-light: #ffffff;
  --logo-ink-light: #2563eb;
  --logo-ground-dark: #09090b;
  --logo-ink-dark: #fafafa;
  --logo-ground-brand: #2563eb;
  --logo-ink-brand: #ffffff;

  /* Illustrations (assets/illustrations.js): drawn only with these, from the scheme; no text, no faces */
  --ill-line: #1e3a8a;
  --ill-fill: #ffffff;
  --ill-soft: #dbeafe;
  --ill-accent: #2563eb;
  --ill-ground: #eef2f7;
  --ill-warm: #fde68a;

  /* A logo is drawn in currentColor with its knockouts in the color behind it. This is that color on
     the page; whatever puts a mark on another color sets it again (the brand tile: --color-primary). */
  --lg-ground: var(--color-surface);

  /* Radii: the pilot's sm 4 px, controls 8 px (rounded-md), cards, tiles and popovers 12 px (rounded-lg) */
  --radius-sm: 4px;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-full: 9999px;

  /* Layout: desktop first, usable on a tablet, no phone layout in V1 (N-02) */
  --size-content: 1200px;
  --bp-tablet: 768px;
  --bp-desktop: 1280px;
  --size-sidebar: 240px;
  --size-header: 56px;
  --size-form: 384px;

  /* Control heights: one height for buttons and fields reads better in a form row; the pilot's options are 36 px */
  --size-control: 36px;
  --size-control-sm: 32px;

  /* Layering */
  --z-header: 10;
  --z-modal: 50;
  --z-toast: 60;

  /* Motion. The pilot's one keyframe drifts a card 4 px over 7 s on the sign-in panel (ADR-0041) */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --duration-drift: 7s;
  --duration-spin: 800ms; /* one turn of a spinner */
  --duration-loader: 1600ms; /* one cycle of a loader drawn from the logo (components.css › Loader) */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-drift: ease-in-out;

  /* Type: the pilot's scale (ADR-0042 and its amendment): 24 px medium page titles, 13 px grey labels and
     table heads in sentence case, 26 px medium figures; body 14 px */
  --text-xs: 12px;
  --leading-xs: 16px;
  --text-label: 13px;
  --leading-label: 20px;
  --text-sm: 14px;
  --leading-sm: 20px;
  --text-md: 16px;
  --leading-md: 24px;
  --text-lg: 18px;
  --leading-lg: 28px;
  --text-xl: 24px;
  --leading-xl: 32px;
  --text-figure: 26px;
  --leading-figure: 32px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --tracking-tight: -0.01em;

  /* The 4 px spacing scale (the pilot uses Tailwind's default, which is the same) */
  --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;

  color-scheme: light;
}

/* ── Dark: the device asks for it and the reader has not chosen, or the reader chose it (proposed, SC-002) ── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {

    /* Surfaces */
    --color-page: #09090b;
    --color-surface: #18181b;
    --color-surface-muted: #27272a;
    --color-surface-inverted: #fafafa;
    --color-overlay: rgb(0 0 0 / 0.6);

    /* Text */
    --color-foreground: #fafafa;
    --color-muted: #a1a1aa;
    --color-subtle: #8e8e98;
    --color-inverted: #09090b;

    /* Borders and focus */
    --color-default: #27272a;
    --color-emphasis: #3f3f46;
    --color-ring: #60a5fa;

    /* Brand */
    --color-primary: #60a5fa;
    --color-primary-hover: #93c5fd;
    --color-primary-foreground: #0b1220;
    --color-primary-soft: #172554;
    --color-primary-strong: #bfdbfe;
    --color-primary-accent: #93c5fd;
    --color-primary-deep: #1e3a8a;

    --color-sidebar: #111113;
    --color-nav-active: #27272a;
    --color-nav-active-text: #fafafa;

    --ill-line: #bfdbfe;
    --ill-fill: #18181b;
    --ill-soft: #172554;
    --ill-accent: #60a5fa;
    --ill-ground: #1f1f23;
    --ill-warm: #b45309;

    /* Feedback */
    --color-danger: #f58b8b;
    --color-danger-hover: #f7a3a3;
    --color-danger-foreground: #0b1220;
    --color-danger-soft: #3b1a1a;
    --color-danger-text: #f58b8b;
    --color-success: #5fd48a;
    --color-success-foreground: #0b1220;
    --color-success-soft: #17301f;
    --color-success-text: #5fd48a;
    --color-warning: #f3b24a;
    --color-warning-foreground: #0b1220;
    --color-warning-soft: #3a2a10;
    --color-warning-text: #f3b24a;
    --color-info: #b7c3cf;
    --color-info-foreground: #0b1220;
    --color-info-soft: #263039;
    --color-info-text: #b7c3cf;

    /* Function owners */
    --color-fn-backoffice: #c9b8f0;
    --color-fn-backoffice-tint: #2b2143;
    --color-fn-land: #7fd3d6;
    --color-fn-land-tint: #0f3334;
    --color-fn-partnerships: #f0a6cf;
    --color-fn-partnerships-tint: #3d1a2f;
    --color-fn-construction: #c9d66a;
    --color-fn-construction-tint: #2b3010;
    --color-fn-legal: #b7c3cf;
    --color-fn-legal-tint: #263039;

    /* Charts: the forecast set apart from the figure, which is light on dark */
    --color-chart-forecast: #1e40af;

    /* Elevation */
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.5);

    color-scheme: dark;
  }
}

:root[data-theme='dark'] {

  /* Surfaces */
  --color-page: #09090b;
  --color-surface: #18181b;
  --color-surface-muted: #27272a;
  --color-surface-inverted: #fafafa;
  --color-overlay: rgb(0 0 0 / 0.6);

  /* Text */
  --color-foreground: #fafafa;
  --color-muted: #a1a1aa;
  --color-subtle: #8e8e98;
  --color-inverted: #09090b;

  /* Borders and focus */
  --color-default: #27272a;
  --color-emphasis: #3f3f46;
  --color-ring: #60a5fa;

  /* Brand */
  --color-primary: #60a5fa;
  --color-primary-hover: #93c5fd;
  --color-primary-foreground: #0b1220;
  --color-primary-soft: #172554;
  --color-primary-strong: #bfdbfe;
  --color-primary-accent: #93c5fd;
  --color-primary-deep: #1e3a8a;

  --color-sidebar: #111113;
  --color-nav-active: #27272a;
  --color-nav-active-text: #fafafa;

  --ill-line: #bfdbfe;
  --ill-fill: #18181b;
  --ill-soft: #172554;
  --ill-accent: #60a5fa;
  --ill-ground: #1f1f23;
  --ill-warm: #b45309;

  /* Feedback */
  --color-danger: #f58b8b;
  --color-danger-hover: #f7a3a3;
  --color-danger-foreground: #0b1220;
  --color-danger-soft: #3b1a1a;
  --color-danger-text: #f58b8b;
  --color-success: #5fd48a;
  --color-success-foreground: #0b1220;
  --color-success-soft: #17301f;
  --color-success-text: #5fd48a;
  --color-warning: #f3b24a;
  --color-warning-foreground: #0b1220;
  --color-warning-soft: #3a2a10;
  --color-warning-text: #f3b24a;
  --color-info: #b7c3cf;
  --color-info-foreground: #0b1220;
  --color-info-soft: #263039;
  --color-info-text: #b7c3cf;

  /* Function owners */
  --color-fn-backoffice: #c9b8f0;
  --color-fn-backoffice-tint: #2b2143;
  --color-fn-land: #7fd3d6;
  --color-fn-land-tint: #0f3334;
  --color-fn-partnerships: #f0a6cf;
  --color-fn-partnerships-tint: #3d1a2f;
  --color-fn-construction: #c9d66a;
  --color-fn-construction-tint: #2b3010;
  --color-fn-legal: #b7c3cf;
  --color-fn-legal-tint: #263039;

  /* Charts: the forecast set apart from the figure, which is light on dark */
  --color-chart-forecast: #1e40af;

  /* Elevation */
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.5);

  color-scheme: dark;
}