/*
 * Chambers Plan design tokens
 * Extracted from https://chambers-plan.vercel.app/css/style.css on 2026-10-08.
 * Section 1 is copied verbatim from the site. Section 2 holds accessibility
 * adjustments that are PROPOSED and need approval before the build uses them.
 */

/* ---------------------------------------------------------------------------
 * 1. Extracted from the marketing site (verbatim)
 * ------------------------------------------------------------------------- */
:root {
  /* Fonts (self-hosted woff2 on the site: /fonts/…) */
  --font-body: "Host Grotesk", "Helvetica Neue", arial, sans-serif; /* variable 300–800, roman + italic */
  --font-display: "Leif", "Leif Symbols", georgia, "Times New Roman", serif; /* 400, 400 italic, 300 italic */
  --font-family: var(--font-body);

  /* Type scale: size / line-height / tracking */
  --font-size-3xs: .625rem;                              --leading-3xs: 1.3;  --tracking-3xs: .08em;
  --font-size-2xs: clamp(.6875rem, .66rem + .1vw, .75rem);  --leading-2xs: 1.3;  --tracking-2xs: .08em;
  --font-size-xs:  clamp(.75rem, .7rem + .19vw, .875rem);   --leading-xs: 1.35;  --tracking-xs: .01em;
  --font-size-sm:  clamp(.875rem, .83rem + .19vw, 1rem);    --leading-sm: 1.4;   --tracking-sm: 0;
  --font-size-md:  clamp(1rem, .95rem + .19vw, 1.125rem);   --leading-md: 1.4;   --tracking-md: 0;
  --font-size-lg:  clamp(1.0625rem, .99rem + .3vw, 1.25rem); --leading-lg: 1.4;  --tracking-lg: 0;
  --font-size-xl:  clamp(1.5rem, 1.3rem + .8vw, 2rem);      --leading-xl: 1.2;   --tracking-xl: -.02em;
  --font-size-2xl: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem); --leading-2xl: 1.1;  --tracking-2xl: -.02em;
  --font-size-3xl: clamp(2rem, 1.6rem + 1.6vw, 3rem);       --leading-3xl: 1.1;  --tracking-3xl: -.02em;
  --font-size-4xl: clamp(2.5rem, 1.7rem + 3.2vw, 4rem);     --leading-4xl: 1;    --tracking-4xl: -.04em;
  --font-size-5xl: clamp(5rem, 2.2rem + 8.4vw, 10rem);      --leading-5xl: 1;    --tracking-5xl: -.04em;

  /* Colour (sRGB hex in comments, approximate) */
  --color-bg: oklch(96.4% .015 77.1);                          /* #f9f2e8 cream */
  --color-bg-inverse: oklch(33.3% .074 .9);                    /* #542434 plum */
  --color-bg-inverse-raised: oklch(38.8% .105 4.8);            /* #70273d */
  --color-surface-warm: oklch(94.5% .032 73.5);                /* #faead6 */
  --color-surface-cool: oklch(96.2% .013 241);                 /* #ebf4fb */
  --color-surface-cool-raised: oklch(98.48% .0052 312.4);      /* #fbf9fd */
  --color-text: oklch(33.3% .074 .9);                          /* #542434 */
  --color-text-muted: oklch(33.3% .074 .899994 / .8);
  --color-heading: oklch(38.8% .105 4.8);                      /* #70273d */
  --color-stroke: oklch(33.3% .074 .899994 / .1);
  --color-panel: oklch(22.2% .038 335.3);                      /* #261422 */
  --color-panel-raised: oklch(96.4% .015 77.1 / .07);
  --color-text-inverse: oklch(96.4% .015 77.1);                /* #f9f2e8 */
  --color-text-inverse-muted: oklch(75.624% .02144 48.596);    /* #bcaca4 */
  --color-text-inverse-subtle: oklch(96.4% .015 77.1 / .4);
  --color-stroke-inverse: oklch(96.4% .015 77.1 / .16);
  --color-accent: oklch(72.9% .135 40.9);                      /* #ee8862 coral */
  --color-accent-deep: oklch(69.858% .12918 36.964);           /* #e27f62 */
  --color-accent-strong: oklch(65.2% .157 31.6);               /* #df6550 */
  --color-accent-soft: oklch(87.9% .096 71.6);                 /* #ffcd90 */
  --color-on-accent: oklch(22.2% .038 335.3);                  /* #261422 */
  --color-tag: oklch(93.2% .003 165.1);                        /* #e7e9e8 */
  --color-on-tag: oklch(52.3% .119 272.6);                     /* #5363ae */
  --color-accent-cool: oklch(52.3% .119 272.6);

  /* Layout and spacing */
  --container: 1312px;
  --container-padding: clamp(1rem, 4vw, 4rem);
  --gap: clamp(1rem, 2vw, 2rem);
  --grid-gap: 1rem;
  --columns: 12;

  /* Shape (the site upgrades to corner-shape: squircle where supported) */
  --radius-md: 1rem;
  --radius-sm: .5rem;     /* media inside cards */
  --radius-xs: .25rem;    /* checkbox */
  --radius-pill: 999px;   /* buttons, choice chips, tags */

  /* Focus */
  --outline-size: max(2px, .15em);

  /* Motion */
  --ease-standard: cubic-bezier(.15, .85, .45, 1);
  --ease-out-circ: cubic-bezier(.075, .82, .165, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --duration-fast: .3s;
  --duration-base: .4s;
  --duration-slow: .6s;

  /* Buttons (.btn) */
  --btn-block-size: 2.5rem;
  --btn-padding-inline: 1.5rem;
  --btn-icon-size: 2.5rem;
}

/* ---------------------------------------------------------------------------
 * 2. Accessibility adjustments: PROPOSED, PENDING APPROVAL
 *    Each one replaces a site value that fails WCAG 2.1 AA on the cream
 *    background. Ratios are against --color-bg (#f9f2e8).
 * ------------------------------------------------------------------------- */
:root {
  /* Site focus ring is coral, 2.27:1 (needs 3:1). Plum heading colour is 9.22:1. */
  --color-focus: var(--color-heading);
  --color-focus-inverse: var(--color-accent-soft);        /* 8.59:1 on plum */

  /* Site input underline is text at 12%, 1.24:1 (needs 3:1). 60% gives 3.64:1. */
  --color-field-stroke: color-mix(in oklch, var(--color-text) 60%, transparent);

  /* Site helper text and unselected chips use 60–65% text, 3.6–4.2:1 (needs 4.5:1).
     Use --color-text-muted (80%, 6.38:1) as the lightest text colour. */

  /* Checked checkbox fill is coral, 2.27:1 against cream. Plum is 9.22:1; tick stays cream. */
  --color-control-checked: var(--color-heading);

  /* The site has no error or success colours, so these are proposals. */
  --color-error: oklch(50% .17 27);                        /* #b02b27, 5.89:1 on bg, 5.56:1 on warm */
  --color-success: oklch(48% .1 150);                      /* #2c6d3e, 5.61:1 on bg */
}