/*
  tokens.css
  Colour ramps are the written KOM palette from the identity guidelines
  (Primary Plus / Minus, Secondary Orange Plus / Minus, Neutral Gray, Dark, White).
  Semantic names below only alias those ramps. They do not introduce new hex values.

  The Figma frame uses #E75B22 for actions. That hex is not on the written ramp.
  Actions use Orange Minus 500 (#E05E28), the accent already chosen in the guidelines.
  Muted copy uses Gray 500, not the frame's #626262, because #626262 on Dark 700
  is about 2:1 and fails WCAG 1.4.3 Contrast (Minimum) for body text.
*/

:root {
  --plus-50: #e6f6f7;
  --plus-100: #bce1ee;
  --plus-200: #99d5ed;
  --plus-300: #69bfe9;
  --plus-400: #4fb0dd;
  --plus-500: #269ad0;
  --plus-600: #208ebd;
  --plus-700: #216e93;
  --plus-800: #0d556f;
  --plus-900: #114652;

  --minus-50: #e7eef4;
  --minus-100: #b2cee3;
  --minus-200: #8eb6da;
  --minus-300: #5a92c4;
  --minus-400: #3b7db0;
  --minus-500: #095da2;
  --minus-600: #0a588e;
  --minus-700: #0c4171;
  --minus-800: #0b345b;
  --minus-900: #06273e;

  --orange-plus-50: #fcf4ec;
  --orange-plus-100: #f6d8c0;
  --orange-plus-200: #f7c7ab;
  --orange-plus-300: #f3aa75;
  --orange-plus-400: #ea9c5e;
  --orange-plus-500: #e3863d;
  --orange-plus-600: #cd7b36;
  --orange-plus-700: #a75e27;
  --orange-plus-800: #7b4b27;
  --orange-plus-900: #5b391e;

  --orange-minus-50: #fdf0e7;
  --orange-minus-100: #fccdb5;
  --orange-minus-200: #f2b399;
  --orange-minus-300: #f19276;
  --orange-minus-400: #e77f53;
  --orange-minus-500: #e05e28;
  --orange-minus-600: #c65522;
  --orange-minus-700: #9e4215;
  --orange-minus-800: #7b351e;
  --orange-minus-900: #632b18;

  --gray-50: #f5f5f5;
  --gray-100: #dbdbdb;
  --gray-200: #c8c8c8;
  --gray-300: #b1b1b1;
  --gray-400: #a1a1a1;
  --gray-500: #8c8c8c;
  --gray-600: #7e7e7e;
  --gray-700: #646464;
  --gray-800: #4b4b4b;
  --gray-900: #3d3d3d;

  --dark-50: #eaeaea;
  --dark-100: #b6b6b6;
  --dark-200: #939393;
  --dark-300: #5e5e5e;
  --dark-400: #464646;
  --dark-500: #111111;
  --dark-600: #0f0f0f;
  --dark-700: #0a0a0a;
  --dark-800: #0a0a0a;
  --dark-900: #090909;

  --white: #ffffff;
  --white-600: #e9e9e9;
  --white-700: #b8b8b8;
  --white-800: #8d8d8d;
  --white-900: #6b6b6b;

  --font-sans: Inter, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-display: "Playfair Display", Georgia, serif;

  --space-page: clamp(1.25rem, 4vw, 3.75rem);
  --page: 1360px;
  --shell-inset: clamp(3rem, 12vw, 14rem);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;

  --header-offset: 5.5rem;
}

/*
  Dark is the designed landing frame.
  Light remaps the same ramps so the theme control is a real change, not a decoration.
  Accent ink is darker on light surfaces so orange text still clears 4.5:1 (1.4.3).
*/
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--dark-700);
  --bg-elevated: var(--dark-500);
  --bg-muted: var(--dark-600);
  --bg-nav: var(--dark-500);
  --text: var(--white);
  --text-soft: var(--gray-50);
  --text-muted: var(--gray-500);
  --text-faint: var(--gray-400);
  --border: var(--dark-400);
  --accent: var(--orange-minus-500);
  --accent-ink: var(--orange-minus-400);
  --on-accent: var(--white);
  --track: var(--gray-900);
  --shadow: 0 16px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: var(--white);
  --bg-elevated: var(--gray-50);
  --bg-muted: var(--white-600);
  --bg-nav: var(--white);
  --text: var(--dark-500);
  --text-soft: var(--dark-500);
  --text-muted: var(--gray-700);
  --text-faint: var(--gray-700);
  --border: var(--gray-200);
  --accent: var(--orange-minus-500);
  --accent-ink: var(--orange-minus-700);
  --on-accent: var(--white);
  --track: var(--gray-200);
  --shadow: 0 16px 24px rgba(17, 17, 17, 0.08);
}