/*
 * Yayoh Design Tokens v1.0
 *
 * This is the authoritative visual token source for the active end-user
 * frontend. Keep screen-specific styling out of this file.
 */
:root {
  color-scheme: dark;

  /* Yayoh semantic color tokens */
  --yayoh-color-canvas: #040C16;
  --yayoh-color-surface: #091420;
  --yayoh-color-elevated-surface: #0B1623;
  --yayoh-color-hero-start: #001A20;
  --yayoh-color-hero-end: #004D49;
  --yayoh-color-border: #1B3442;
  --yayoh-color-primary-accent: #00C8B2;
  --yayoh-color-bright-accent: #18DDC7;
  --yayoh-color-primary-text: #F4F7F9;
  --yayoh-color-secondary-text: #98AABC;
  --yayoh-color-success: #2AD1A2;
  --yayoh-color-warning: #E9A83A;
  --yayoh-color-danger: #EF6666;
  --yayoh-gradient-hero: linear-gradient(135deg, var(--yayoh-color-hero-start), var(--yayoh-color-hero-end));

  /* Yayoh layout tokens */
  --yayoh-space-1: 4px;
  --yayoh-space-2: 8px;
  --yayoh-space-3: 12px;
  --yayoh-space-4: 16px;
  --yayoh-space-5: 24px;
  --yayoh-space-6: 32px;
  --yayoh-radius-control: 12px;
  --yayoh-radius-card: 18px;
  --yayoh-radius-hero: 24px;
  --yayoh-touch-target-min: 44px;

  /* Functional icon contract */
  --yayoh-icon-size: 20px;
  --yayoh-icon-stroke: 1.8;

  /*
   * Compatibility aliases for the active vanilla frontend. New UI should
   * use the --yayoh-* names; these aliases keep existing screens stable while
   * the shared primitives are introduced in the next UX layer.
   */
  --bg: var(--yayoh-color-canvas);
  --surface: var(--yayoh-color-surface);
  --surface-2: var(--yayoh-color-elevated-surface);
  --surface-3: var(--yayoh-color-elevated-surface);
  --border: var(--yayoh-color-border);
  --text: var(--yayoh-color-primary-text);
  --text-muted: var(--yayoh-color-secondary-text);
  --accent: var(--yayoh-color-primary-accent);
  --accent-2: var(--yayoh-color-bright-accent);
  --success: var(--yayoh-color-success);
  --warning: var(--yayoh-color-warning);
  --danger: var(--yayoh-color-danger);
  --info: var(--yayoh-color-bright-accent);
  --figure-body: #e7eef7;
  --figure-equipment: #66798d;
  --shadow: 0 18px 50px rgba(0, 0, 0, .28);
  --radius: var(--yayoh-radius-card);
  --safe-bottom: max(16px, env(safe-area-inset-bottom));
}

/*
 * Light mode remains supported, but its semantic mapping lives here as well.
 * The approved Yayoh dark palette above remains the source of truth for the
 * primary product surface.
 */
html[data-theme="light"] {
  color-scheme: light;
  --yayoh-color-canvas: #eef3f7;
  --yayoh-color-surface: #ffffff;
  --yayoh-color-elevated-surface: #f7fafc;
  --yayoh-color-hero-start: #d9f4ef;
  --yayoh-color-hero-end: #b8e5df;
  --yayoh-color-border: #d8e2ea;
  --yayoh-color-primary-accent: #0aa992;
  --yayoh-color-bright-accent: #147d72;
  --yayoh-color-primary-text: #102033;
  --yayoh-color-secondary-text: #64768a;
  --yayoh-color-success: #138c52;
  --yayoh-color-warning: #b86b04;
  --yayoh-color-danger: #c43d3d;
  --yayoh-gradient-hero: linear-gradient(135deg, var(--yayoh-color-hero-start), var(--yayoh-color-hero-end));
  --figure-body: #1d3347;
  --figure-equipment: #7c8c99;
  --shadow: 0 18px 50px rgba(24, 45, 63, .12);
}