/* =========================================================================
   PASTIL — SHARED DESIGN TOKENS (single source of truth)
   Used by: index.html (styles.css) and rider.html
   Architecture: Primitive -> Semantic -> Component (W3C DTCG-aligned)

   HOW IT WORKS
   - Edit colors/spacing ONCE here. Both apps update.
   - Legacy variable names (--ds-*, --primary, --accent-*) are kept as
     thin aliases at the bottom so existing CSS keeps working unchanged.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     LAYER 1 — PRIMITIVES (raw values, no meaning)
     --------------------------------------------------------------------- */

  /* Brand orange */
  --color-orange-400: #ff7e5f;   /* lighter orange (was index --ds-accent) */
  --color-orange-500: #f07b3f;   /* canonical brand orange (rider --primary) */
  --color-orange-tint: rgba(240, 123, 63, 0.15);

  /* Status */
  --color-green-500: #34c759;
  --color-yellow-500: #ffd60a;
  --color-red-500: #ff3b30;      /* canonical danger/red */
  --color-blue-500: #0a84ff;     /* canonical blue */
  --color-cyan-400: #64d2ff;

  /* Neutrals */
  --color-black: #0a0a0a;        /* base surface */
  --color-gray-950: #141414;     /* elevated surface */
  --color-white: #ffffff;

  /* Alpha whites (for glass borders, text, fills) */
  --white-04: rgba(255, 255, 255, 0.04);
  --white-40: rgba(255, 255, 255, 0.40);
  --white-50: rgba(255, 255, 255, 0.50);

  /* Radius */
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Motion easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-liquid: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-liquid-width: cubic-bezier(0.25, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.4, 1);
  --ease-press: cubic-bezier(0.2, 0, 0, 1);

  /* ---------------------------------------------------------------------
     LAYER 2 — SEMANTIC (purpose-based aliases -> primitives)
     --------------------------------------------------------------------- */
  --color-primary: var(--color-orange-500);
  --color-primary-soft: var(--color-orange-400);
  --color-primary-tint: var(--color-orange-tint);

  --color-success: var(--color-green-500);
  --color-warning: var(--color-yellow-500);
  --color-danger: var(--color-red-500);
  --color-info: var(--color-blue-500);
  --color-accent-cyan: var(--color-cyan-400);

  --color-surface: var(--color-black);
  --color-surface-elevated: var(--color-gray-950);

  --text-primary: var(--color-white);
  --text-secondary: var(--white-50);
  --text-tertiary: var(--white-40);

  /* ---------------------------------------------------------------------
     LAYER 3 — LEGACY ALIASES (keep existing CSS working)
     --------------------------------------------------------------------- */

  /* index.html / styles.css used --ds-* */
  --ds-surface: var(--color-surface);
  --ds-elevated: var(--color-surface-elevated);
  --ds-accent: var(--color-primary);          /* now unified to brand orange */
  --ds-accent-tint: var(--color-primary-tint);
  --ds-confirm: var(--color-success);
  --ds-alert: var(--color-warning);
  --ds-danger: var(--color-danger);
  --ds-blue: var(--color-info);
  --ds-cyan: var(--color-accent-cyan);

  /* rider.html used --primary / --accent-* / --text-* */
  --primary: var(--color-primary);
  --accent-blue: var(--color-info);            /* unified to #0a84ff */
  --accent-green: var(--color-success);
  --accent-yellow: var(--color-warning);
  --accent-red: var(--color-danger);           /* unified to #ff3b30 */
  --text-main: var(--text-primary);
  --text-muted: var(--text-secondary);
}