/*
  Canvas design system 1.0.0 (2026-10-23): tokens.
  Every value the components read lives here. Light is the default; dark follows the
  visitor's system setting unless html[data-theme] says otherwise.
  Text pairs are solid colors so they can be measured. Tints and hairlines are decorative.
*/

:root {
  color-scheme: light;

  /* ---- Surfaces ---- */
  --cv-canvas: #ffffff;            /* default section background */
  --cv-canvas-alt: #f3efe8;        /* warm stone: the alternate section background */
  --cv-surface: #ffffff;           /* card sitting on the stone canvas */
  --cv-surface-tonal: #f3efe8;     /* card sitting on the white canvas */
  --cv-surface-raised: #ebe5db;    /* a quiet well inside a card (mock panels, code) */

  /* ---- Text ---- */
  --cv-ink: #1c1915;               /* headings and body copy */
  --cv-ink-secondary: #554d45;     /* intros, card copy, captions */
  --cv-ink-tertiary: #685e54;      /* footnotes, input hints and input placeholders only */
  --cv-link: #7c3d00;              /* deep amber text links */
  --cv-link-hover: #1c1915;

  /* ---- Accent (marigold) ---- */
  --cv-accent: #f2b134;            /* filled buttons, selected states, focus fills */
  --cv-accent-hover: #e8a320;
  --cv-on-accent: #1c1915;         /* label on a marigold fill, both themes */
  --cv-accent-tint: #fcefd2;       /* accent badge and highlight background */
  --cv-accent-ink: #7c3d00;        /* text on the accent tint */
  --cv-positive-tint: #e2f0e6;
  --cv-positive-ink: #1a5c3b;

  /* ---- The one gradient moment ---- */
  --cv-gradient-from: #b86200;     /* text gradient, deep marigold */
  --cv-gradient-to: #c8321e;       /* text gradient, coral-red */
  --cv-gradient-surface-from: #f6c55a;
  --cv-gradient-surface-to: #f08a5d;
  --cv-on-gradient: #1c1915;

  /* ---- Forced-dark band (closing CTA) ---- */
  --cv-band-canvas: #1c1915;
  --cv-band-surface: #28241f;
  --cv-band-ink: #f6f2ec;
  --cv-band-secondary: #c9c0b5;
  --cv-band-link: #f5c063;
  --cv-band-border: #857a6d;
  --cv-band-hairline: rgba(246, 242, 236, 0.14);

  /* ---- Lines and controls ---- */
  --cv-hairline: rgba(28, 25, 21, 0.12);   /* list rows, FAQ, table rows */
  --cv-hairline-strong: rgba(28, 25, 21, 0.2);
  --cv-control-border: #857b6f;            /* inputs, ghost buttons: 3:1 or better */
  --cv-focus: #7c3d00;
  --cv-danger: #a3271a;

  /* ---- Type ---- */
  --cv-font: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --cv-font-mono: ui-monospace, Consolas, "Liberation Mono", monospace;
  --cv-weight: 400;
  --cv-weight-strong: 600;
  --cv-stretch-display: 92%;               /* display and headline only */

  --cv-fs-display: clamp(2.75rem, 1.9rem + 3.6vw, 4.5rem);    /* 44 to 72 */
  --cv-fs-headline: clamp(2rem, 1.6rem + 1.8vw, 3rem);         /* 32 to 48 */
  --cv-fs-title: clamp(1.625rem, 1.45rem + 0.75vw, 2rem);      /* 26 to 32 */
  --cv-fs-callout: clamp(1.3125rem, 1.2rem + 0.5vw, 1.625rem); /* 21 to 26 */
  --cv-fs-intro: clamp(1.1875rem, 1.13rem + 0.25vw, 1.3125rem);/* 19 to 21 */
  --cv-fs-body: 1.0625rem;                                     /* 17 */
  --cv-fs-caption: 0.875rem;                                   /* 14 */
  --cv-fs-footnote: 0.75rem;                                   /* 12 */

  --cv-lh-display: 1.04;
  --cv-lh-headline: 1.08;
  --cv-lh-title: 1.15;
  --cv-lh-callout: 1.25;
  --cv-lh-intro: 1.45;
  --cv-lh-body: 1.6;
  --cv-lh-caption: 1.45;

  --cv-track-display: -0.025em;
  --cv-track-headline: -0.02em;
  --cv-track-title: -0.012em;
  --cv-track-callout: -0.006em;
  --cv-track-body: 0em;

  /* ---- Space (4px base) ---- */
  --cv-space-1: 0.25rem;   /* 4 */
  --cv-space-2: 0.5rem;    /* 8 */
  --cv-space-3: 0.75rem;   /* 12 */
  --cv-space-4: 1rem;      /* 16 */
  --cv-space-5: 1.5rem;    /* 24 */
  --cv-space-6: 2rem;      /* 32 */
  --cv-space-7: 3rem;      /* 48 */
  --cv-space-8: 4rem;      /* 64 */
  --cv-space-9: 6rem;      /* 96 */

  --cv-section-pad: clamp(7rem, 5.8rem + 2.6vw, 9rem);         /* 112 to 144 */
  --cv-section-pad-tight: clamp(4rem, 3.4rem + 1.6vw, 5.5rem); /* 64 to 88 */
  --cv-header-gap: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);        /* section header to content */
  --cv-gutter: 20px;
  --cv-gutter-loose: 40px;
  --cv-page-pad: clamp(20px, 4vw, 40px);

  /* ---- Layout rails ---- */
  --cv-measure-text: 720px;
  --cv-measure-content: 1080px;
  --cv-measure-wide: 1360px;

  /* ---- Shape ---- */
  --cv-radius-button: 14px;
  --cv-radius-input: 12px;
  --cv-radius-badge: 8px;
  --cv-radius-card: 24px;
  --cv-radius-media: 18px;
  --cv-radius-inner: 12px;

  /* ---- Elevation (framed imagery only) ---- */
  --cv-shadow-media: 0 0 0 1px rgba(28, 25, 21, 0.07), 0 2px 4px rgba(28, 25, 21, 0.04), 0 24px 48px -24px rgba(28, 25, 21, 0.24);
  --cv-shadow-pop: 0 0 0 1px rgba(28, 25, 21, 0.06), 0 12px 32px -12px rgba(28, 25, 21, 0.28);

  /* ---- Context: the surface that stands out from the one you are on (sections and cards reset it) ---- */
  --cv-contrast-surface: var(--cv-surface-tonal);

  /* ---- Motion ---- */
  --cv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cv-duration: 0.24s;
  --cv-duration-reveal: 0.7s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cv-canvas: #151311;
    --cv-canvas-alt: #1f1c18;
    --cv-surface: #28241f;
    --cv-surface-tonal: #1f1c18;
    --cv-surface-raised: #322d27;
    --cv-ink: #f6f2ec;
    --cv-ink-secondary: #c9c0b5;
    --cv-ink-tertiary: #a39888;
    --cv-link: #f5c063;
    --cv-link-hover: #f6f2ec;
    --cv-accent: #f2b134;
    --cv-accent-hover: #f5bd4d;
    --cv-on-accent: #1c1915;
    --cv-accent-tint: #3a2f1c;
    --cv-accent-ink: #f5c063;
    --cv-positive-tint: #1b3326;
    --cv-positive-ink: #7fd8a4;
    --cv-gradient-from: #f6b84a;
    --cv-gradient-to: #ff7a5c;
    --cv-gradient-surface-from: #e9b450;
    --cv-gradient-surface-to: #ee8a62;
    --cv-on-gradient: #1c1915;
    --cv-band-canvas: #2b2621;
    --cv-band-surface: #36302a;
    --cv-band-ink: #f6f2ec;
    --cv-band-secondary: #c9c0b5;
    --cv-band-link: #f5c063;
    --cv-band-border: #857a6d;
    --cv-band-hairline: rgba(246, 242, 236, 0.14);
    --cv-hairline: rgba(246, 242, 236, 0.12);
    --cv-hairline-strong: rgba(246, 242, 236, 0.2);
    --cv-control-border: #857a6d;
    --cv-focus: #f5c063;
    --cv-danger: #ff9a85;
    --cv-shadow-media: 0 0 0 1px rgba(246, 242, 236, 0.08), 0 24px 48px -24px rgba(0, 0, 0, 0.6);
    --cv-shadow-pop: 0 0 0 1px rgba(246, 242, 236, 0.08), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --cv-canvas: #151311;
  --cv-canvas-alt: #1f1c18;
  --cv-surface: #28241f;
  --cv-surface-tonal: #1f1c18;
  --cv-surface-raised: #322d27;
  --cv-ink: #f6f2ec;
  --cv-ink-secondary: #c9c0b5;
  --cv-ink-tertiary: #a39888;
  --cv-link: #f5c063;
  --cv-link-hover: #f6f2ec;
  --cv-accent: #f2b134;
  --cv-accent-hover: #f5bd4d;
  --cv-on-accent: #1c1915;
  --cv-accent-tint: #3a2f1c;
  --cv-accent-ink: #f5c063;
  --cv-positive-tint: #1b3326;
  --cv-positive-ink: #7fd8a4;
  --cv-gradient-from: #f6b84a;
  --cv-gradient-to: #ff7a5c;
  --cv-gradient-surface-from: #e9b450;
  --cv-gradient-surface-to: #ee8a62;
  --cv-on-gradient: #1c1915;
  --cv-band-canvas: #2b2621;
  --cv-band-surface: #36302a;
  --cv-band-ink: #f6f2ec;
  --cv-band-secondary: #c9c0b5;
  --cv-band-link: #f5c063;
  --cv-band-border: #857a6d;
  --cv-band-hairline: rgba(246, 242, 236, 0.14);
  --cv-hairline: rgba(246, 242, 236, 0.12);
  --cv-hairline-strong: rgba(246, 242, 236, 0.2);
  --cv-control-border: #857a6d;
  --cv-focus: #f5c063;
  --cv-danger: #ff9a85;
  --cv-shadow-media: 0 0 0 1px rgba(246, 242, 236, 0.08), 0 24px 48px -24px rgba(0, 0, 0, 0.6);
  --cv-shadow-pop: 0 0 0 1px rgba(246, 242, 236, 0.08), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
}