/* Red Platter design tokens (B-03). Values from docs/design-direction.md.
   Colours and fonts are UNCONFIRMED by the client (N8). Change them here only. */
:root {
  /* brand palette */
  --rp-crimson: #AC1F30;
  --rp-red-bright: #E61D35;   /* large text and UI on dark only */
  --rp-deep: #6C0000;
  --rp-ink: #1E1416;
  --rp-blush: #FBEFEA;
  --rp-blush-deep: #F6E3DC;
  --rp-body: #464646;
  --rp-brass: #C99A4B;

  /* semantic colours (base.css uses only these) */
  --color-bg: var(--rp-blush);
  --color-surface: #FFFFFF;
  --color-surface-2: var(--rp-blush-deep);
  --color-text: var(--rp-body);            /* 8.38 on blush */
  --color-text-muted: #6B5B5B;             /* 5.69 on blush */
  --color-heading: var(--rp-deep);         /* 11.38 on blush */
  --color-primary: var(--rp-crimson);      /* white on it 7.02 */
  --color-primary-hover: var(--rp-deep);
  --color-on-primary: #FFFFFF;
  --color-accent: var(--rp-brass);
  --color-border: rgb(108 0 0 / .16);
  --color-focus: #1F5FBF;                  /* 5.41 on blush */
  --color-error: #B3261E;

  /* type: logo-matched condensed headings. Fonts to self-host in C-01 */
  --font-heading: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --heading-weight: 700;
  --heading-transform: uppercase;
  --heading-tracking: .04em;
  --heading-leading: 1.1;

  /* fluid type scale (390 px to 1280 px) */
  --step--1: clamp(.8125rem, .79rem + .1vw, .875rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:  clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
  --step-4:  clamp(2.25rem, 1.6rem + 3.2vw, 4rem);

  /* spacing (4 px base) */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6rem;

  /* shape (iOS-like) */
  --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(30 20 22 / .08), 0 4px 12px rgb(30 20 22 / .06);
  --shadow-2: 0 2px 4px rgb(30 20 22 / .08), 0 12px 32px rgb(30 20 22 / .14);

  /* glass (macOS vibrancy) */
  --glass-bg: rgb(251 239 234 / .72);
  --glass-border: rgb(255 255 255 / .55);
  --glass-blur: saturate(160%) blur(18px);

  /* motion */
  --ease-spring: cubic-bezier(.2, .9, .25, 1.15);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: 160ms; --dur-2: 280ms; --dur-3: 520ms;

  /* layout */
  --container: 72rem; --gutter: clamp(1rem, 4vw, 2rem); --tap: 44px;
  --z-nav: 50; --z-sheet: 80; --z-toast: 90;
}

/* dark band: crimson is never used as text here (2.56 on ink) */
.band-dark {
  --color-bg: var(--rp-ink);
  --color-surface: #2A1D20;
  --color-surface-2: #34262A;
  --color-text: var(--rp-blush);           /* 15.97 */
  --color-text-muted: #D9C7C0;             /* 11.04 */
  --color-heading: var(--rp-blush);
  --color-accent: var(--rp-brass);         /* 7.03 */
  --color-border: rgb(251 239 234 / .18);
  --color-focus: #F2C14E;                  /* 10.72 */
  --glass-bg: rgb(30 20 22 / .6);
  --glass-border: rgb(255 255 255 / .12);
}