/* Ferrari — generated by tools/brand_tokens.py. Do not hand-edit.

   Every value below is transcribed from awesome-design-md/design-md/ferrari/DESIGN.md, read 2026-09-16
   or SOLVED from those values. What is solved is which colour each role takes:
   the published value nearest its limit that still clears its role's WCAG
   ratio against the worst ground in its own theme, so a secondary colour
   legible on the page is also legible in the band beside it.

   Depth: A ground change. The reference lifts a card from the canvas to the elevated grey and leaves it there; there is no shadow ladder.
   Motion: Not published. The reference documents no duration and no easing. The two rungs here are this portfolio's.

   An explicit data-theme wins over the system preference in both directions,
   so an in-page toggle is not fighting a media query.
*/
:root {
  color-scheme: dark light;
  --fr-paper: #181818;
  --fr-raise: #303030;
  --fr-sink: #181818;
  --fr-ink: #ffffff;
  --fr-ink-2: #ebebeb;
  --fr-ink-3: #d2d2d2;
  --fr-stroke: #8f8f8f;
  --fr-rule: #303030;
  --fr-accent: #da291c;
  --fr-on-accent: #ffffff;
  --fr-accent-text: #ff6450;
  --fr-accent-quiet: #211b19;
  --fr-focus: #ffffff;
  --fr-info: #4c98b9;
  --fr-info-text: #54a0c1;
  --fr-success: #03904a;
  --fr-success-text: #37ac64;
  --fr-warning: #f13a2c;
  --fr-warning-text: #ff6452;
  --fr-accent-press: #b01e0a;

  --fr-family-sans: 'Archivo', -apple-system, system-ui, 'Helvetica Neue', sans-serif;

  --fr-weight-regular: 400;
  --fr-weight-medium: 500;

  --fr-tracking-display: -0.02em;
  --fr-tracking-display-tight: -0.028em;
  --fr-tracking-caps: 0.08em;

  --fr-text-display-mega: clamp(2.75rem, 1.9577rem + 3.3803vw, 5rem);
  --fr-leading-display-mega: 1.05;
  --fr-text-display-xl: clamp(2.125rem, 1.6408rem + 2.0657vw, 3.5rem);
  --fr-leading-display-xl: 1.1;
  --fr-text-display-lg: clamp(1.75rem, 1.5739rem + 0.7512vw, 2.25rem);
  --fr-leading-display-lg: 1.2;
  --fr-text-display-md: 1.625rem;
  --fr-leading-display-md: 1.5;
  --fr-text-title-md: 1.125rem;
  --fr-leading-title-md: 1.4;
  --fr-text-title-sm: 1rem;
  --fr-leading-title-sm: 1.4;
  --fr-text-body: 0.875rem;
  --fr-leading-body: 1.5;
  --fr-text-body-sm: 0.8125rem;
  --fr-leading-body-sm: 1.5;
  --fr-text-caption: 0.75rem;
  --fr-leading-caption: 1.4;
  --fr-text-caption-uc: 0.6875rem;
  --fr-leading-caption-uc: 1.2;

  --fr-sp-4: 0.25rem;
  --fr-sp-8: 0.5rem;
  --fr-sp-16: 1rem;
  --fr-sp-24: 1.5rem;
  --fr-sp-32: 2rem;
  --fr-sp-48: 3rem;
  --fr-sp-64: 4rem;
  --fr-sp-96: 6rem;
  --fr-sp-128: 8rem;

  --fr-radius-none: 0;
  --fr-radius-xs: 2px;
  --fr-radius-sm: 4px;
  --fr-radius-md: 6px;
  --fr-radius-lg: 8px;
  --fr-radius-xl: 12px;
  --fr-radius-full: 9999px;

  --fr-duration-base: 200ms;
  --fr-duration-exit: 140ms;
  --fr-ease-base: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --fr-paper: #ffffff;
    --fr-raise: #ffffff;
    --fr-sink: #f7f7f7;
    --fr-ink: #181818;
    --fr-ink-2: #303030;
    --fr-ink-3: #666666;
    --fr-stroke: #8f8f8f;
    --fr-rule: #d2d2d2;
    --fr-accent: #da291c;
    --fr-on-accent: #ffffff;
    --fr-accent-text: #da2a1d;
    --fr-accent-quiet: #fff6f4;
    --fr-focus: #181818;
    --fr-info: #4c98b9;
    --fr-info-text: #2b7a9a;
    --fr-success: #03904a;
    --fr-success-text: #00833d;
    --fr-warning: #f13a2c;
    --fr-warning-text: #de2218;
    --fr-accent-press: #9d2211;
  }
}

:root[data-theme="light"] {
  --fr-paper: #ffffff;
  --fr-raise: #ffffff;
  --fr-sink: #f7f7f7;
  --fr-ink: #181818;
  --fr-ink-2: #303030;
  --fr-ink-3: #666666;
  --fr-stroke: #8f8f8f;
  --fr-rule: #d2d2d2;
  --fr-accent: #da291c;
  --fr-on-accent: #ffffff;
  --fr-accent-text: #da2a1d;
  --fr-accent-quiet: #fff6f4;
  --fr-focus: #181818;
  --fr-info: #4c98b9;
  --fr-info-text: #2b7a9a;
  --fr-success: #03904a;
  --fr-success-text: #00833d;
  --fr-warning: #f13a2c;
  --fr-warning-text: #de2218;
  --fr-accent-press: #9d2211;
}