/* Hallmark · tokens · studied-DNA (source: Microsoft Fluent 2 web, light theme — Azure pricing calculator register, user's pick)
 * paper oklch(98.5% 0 0) canvas + white cards · accent oklch(52.6% 0.149 252) Fluent brand blue · Segoe UI (system) throughout
 * Light only. All colours below are the Fluent 2 neutral / brand / status ramps expressed in OKLCH. */

:root {
  color-scheme: light;

  /* Neutrals */
  --color-canvas:      oklch(98.5% 0 0);         /* #fafafa  neutralBackground2 — page */
  --color-surface:     oklch(100% 0 0);          /* #ffffff  neutralBackground1 — cards, inputs */
  --color-surface-2:   oklch(97% 0 0);           /* #f5f5f5  neutralBackground3 — table head, hover */
  --color-surface-3:   oklch(95.5% 0 0);         /* #f0f0f0  neutralBackground4 */
  --color-stroke:      oklch(86.1% 0 0);         /* #d1d1d1  neutralStroke1 — control borders */
  --color-stroke-2:    oklch(90.7% 0 0);         /* #e0e0e0  neutralStroke2 — dividers, card borders */
  --color-stroke-acc:  oklch(49.3% 0 0);         /* #616161  neutralStrokeAccessible — input underline */
  --color-fg:          oklch(26% 0 0);           /* #242424  neutralForeground1 */
  --color-fg-2:        oklch(37.9% 0 0);         /* #424242  neutralForeground2 */
  --color-fg-3:        oklch(49.3% 0 0);         /* #616161  neutralForeground3 */

  /* Brand — Fluent communication blue */
  --color-brand:        oklch(52.6% 0.149 252);  /* #0f6cbd */
  --color-brand-hover:  oklch(47.6% 0.131 251);  /* #115ea3 */
  --color-brand-press:  oklch(34.1% 0.078 246);  /* #0c3b5e */
  --color-brand-tint:   oklch(96.1% 0.015 251);  /* #ebf3fc  brandBackground2 */
  --color-brand-stroke: oklch(86.3% 0.062 250);  /* #b4d6fa */
  --color-on-brand:     oklch(100% 0 0);

  /* Status */
  --color-success:        oklch(47.5% 0.153 143);  /* #0e700e */
  --color-success-bg:     oklch(97.6% 0.015 145);  /* #f1faf1 */
  --color-success-stroke: oklch(82.8% 0.098 145);  /* #9fd89f */
  --color-warning:        oklch(55.6% 0.160 43);   /* #bc4b09 */
  --color-warning-bg:     oklch(98.6% 0.008 56);   /* #fff9f5 */
  --color-warning-stroke: oklch(88.8% 0.064 52);   /* #fdcfb4 */
  --color-danger:         oklch(48.3% 0.190 26);   /* #b10e1c */
  --color-danger-bg:      oklch(97.2% 0.011 10);   /* #fdf3f4 */
  --color-danger-stroke:  oklch(80.8% 0.078 13);   /* #eeacb2 */

  /* Type — Segoe UI (Fluent web stack) */
  --font-ui: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, sans-serif;

  --text-caption: 0.75rem;     /* 12/16  caption1 */
  --text-body:    0.875rem;    /* 14/20  body1 */
  --text-body-2:  1rem;        /* 16/22  body2 / subtitle2 */
  --text-sub:     1.25rem;     /* 20/28  subtitle1 */
  --text-title:   1.5rem;      /* 24/32  title3 */
  --text-page:    clamp(1.75rem, 1.2vw + 1.3rem, 2rem);   /* 28–32  title1 */
  --text-figure:  clamp(2.25rem, 2vw + 1.5rem, 2.5rem);   /* 36–40  largeTitle */

  /* Space — Fluent 4px ramp */
  --space-xxs: 0.125rem;
  --space-xs:  0.25rem;
  --space-s:   0.5rem;
  --space-m:   0.75rem;
  --space-l:   1rem;
  --space-xl:  1.25rem;
  --space-xxl: 1.5rem;
  --space-3xl: 2rem;
  --space-4xl: 3rem;

  --radius-s: 2px;
  --radius-m: 4px;
  --radius-l: 8px;
  --control-h: 2.25rem;
  --container: 80rem;
  --gutter: clamp(1rem, 3vw, 2rem);
  --elev-card: 0 2px 4px oklch(0% 0 0 / 0.08);
  --elev-bar: 0 -2px 8px oklch(0% 0 0 / 0.10);

  /* Motion — Fluent durations / curves */
  --ease-out: cubic-bezier(0.1, 0.9, 0.2, 1);
  --ease-in-out: cubic-bezier(0.33, 0, 0.67, 1);
  --dur-fast: 150ms;
  --dur-normal: 200ms;

  --z-base: 1;
  --z-sticky: 200;
}