/* Optiflow design tokens. Brand colours are converted exactly from the v3
 * identity (hex in comments). Pages reference these names only. */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallback so the swap to Plex does not shift the layout. */
@font-face {
  font-family: 'Plex Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 99%;
  ascent-override: 103%;
  descent-override: 28%;
  line-gap-override: 0%;
}

:root {
  /* Surfaces */
  --color-paper: oklch(97.75% 0.0041 121.6); /* Process White #F7F8F5 */
  --color-paper-2: oklch(95.5% 0.0051 145.5); /* #EEF1EE */
  --color-steel: oklch(90.19% 0.0081 216.6); /* Steel #D9E0E2 */
  --color-rule: oklch(86.72% 0.0088 205.9); /* #CDD5D6, decorative rules */
  --color-night: oklch(20.5% 0.02 248.8); /* Graphite #101820 */
  --color-night-2: oklch(25.34% 0.0239 241.3); /* #18242D */
  --color-night-3: oklch(30.05% 0.0249 236.9); /* #223039 */
  --color-rule-night: oklch(37.61% 0.0277 234.3); /* #33444E */

  /* Text */
  --color-ink: oklch(20.5% 0.02 248.8); /* Graphite, 16.8:1 on paper */
  --color-ink-2: oklch(39.42% 0.0238 241.3); /* #3B4852, 8.8:1 */
  --color-muted: oklch(49.15% 0.0205 234.9); /* #56636B, 5.8:1 */
  --color-on-night: oklch(97.75% 0.0041 121.6);
  --color-muted-night: oklch(76.68% 0.0195 227.4); /* #A7B6BD, 8.6:1 on graphite */

  /* Accents: teal carries flow; copper marks a point of intervention. */
  --color-teal: oklch(53.36% 0.0908 201.7); /* Flow Teal #007C83, 4.7:1 on paper */
  --color-teal-deep: oklch(47.71% 0.0812 201.6); /* #006A70, 6:1, small text on tints */
  --color-mint: oklch(84.82% 0.0927 189.5); /* Light Teal #80E1DA, graphite only */
  --color-copper: oklch(66.56% 0.1704 44); /* Intervention Copper #E66A2C, graphics */
  --color-copper-text: oklch(55.17% 0.1441 44.3); /* #B4501C, 4.8:1 small text on paper */
  --color-focus: oklch(53.36% 0.0908 201.7);
  /* Semantic states are separate from the brand palette (brand-tokens.css):
     copper marks a point of intervention and is never used as a warning. */
  --color-danger: oklch(50.2% 0.1832 27.2); /* #B42318 */
  --color-danger-night: oklch(72% 0.14 27); /* lighter danger for graphite, 6.3:1 */
  --color-focus-night: oklch(84.82% 0.0927 189.5);

  /* Type */
  --font-body: 'IBM Plex Sans', 'Plex Fallback', Arial, sans-serif;
  --font-display: 'IBM Plex Sans', 'Plex Fallback', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --text-display: clamp(2.5rem, 3.4vw + 0.9rem, 4.5rem);
  --text-h2: clamp(2rem, 2.2vw + 1.1rem, 3.25rem);
  --text-h3: clamp(1.25rem, 0.5vw + 1.08rem, 1.5rem);
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --text-label: 0.75rem;
  --leading-tight: 1.06;
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --tracking-display: -0.035em;
  --tracking-heading: -0.022em;
  --tracking-label: 0.08em;

  /* Space: the brand's 8 px unit (16–24 px within groups, 32–64 px between
     groups). The 4 and 12 px steps are for component internals only. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  /* Never less than the screen's safe area (a phone's notch in landscape). */
  --gutter: max(clamp(1rem, 4vw, 3.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  /* One content container for every section, the header and the 3D frame. */
  --container: 80rem;
  --column-gap: 2rem;
  /* Side padding that centres content in the container (percent of the section). */
  --pad-x: max(var(--gutter), calc((100% - var(--container)) / 2));
  --measure: 36rem;

  /* Shape echoes the rounded-rectangle O. */
  --radius-control: 0.375rem;
  --radius-panel: 0.875rem;
  --radius-pill: 999px;
  --rule: 1px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  /* Layers */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-modal: 400;

  --header-h: 4rem;
}