/* Myles Mode — color tokens
   Sampled from the brand banner: pure black field, white mark,
   and an ember ramp running deep red-orange → hot amber. */
:root {
  /* Base — ink (warm blacks) */
  --ink-0: #000000;
  --ink-1: #0E0B08;
  --ink-2: #191410;
  --ink-3: #261E16;
  --ink-4: #3A2E21;

  /* Base — paper (warm off-whites, for long reads) */
  --paper-0: #FFFFFF;
  --paper-1: #F6F0E6;
  --paper-2: #EDE4D4;
  --paper-3: #E0D3BD;

  /* Base — ember ramp (from the banner) */
  --ember-100: #FFE8C2;
  --ember-200: #FFD08A;
  --ember-300: #FFB347;
  --ember-400: #FF9A1F;
  --ember-500: #F27A0C;
  --ember-600: #D85C04;
  --ember-700: #B04102;
  --ember-800: #6E2A02;
  --ember-900: #2E1403;

  /* Semantic — surfaces */
  --surface-page: var(--ink-1);          /* default: dark-first */
  --surface-raised: var(--ink-2);
  --surface-card: var(--ink-2);
  --surface-read: var(--paper-1);        /* long-form reading surface */
  --surface-accent: var(--ember-500);

  /* Semantic — text on dark */
  --text-display: #FFFFFF;
  --text-body: rgba(255, 255, 255, 0.86);
  --text-muted: rgba(255, 255, 255, 0.55);
  --text-accent: var(--ember-400);

  /* Semantic — text on paper */
  --text-display-on-paper: var(--ink-1);
  --text-body-on-paper: #241C13;
  --text-muted-on-paper: rgba(36, 28, 19, 0.6);
  --text-accent-on-paper: var(--ember-600);

  /* Semantic — lines & focus */
  --border-hard: #FFFFFF;                 /* on dark: solid white rules */
  --border-soft: rgba(255, 255, 255, 0.22);
  --border-hard-on-paper: var(--ink-1);
  --border-soft-on-paper: rgba(14, 11, 8, 0.25);
  --focus-ring: var(--ember-400);

  /* Semantic — feedback (used sparingly; warning doubles as brand) */
  --warn: var(--ember-500);
  --danger: #D8330E;
  --ok: #6F8F3A;
}