/*
 * Design tokens, lifted from the Solarex rider prototype so the two stay
 * comparable name for name. Nothing but custom property declarations may live
 * here — Propshaft's `stylesheet_link_tag :app` includes this directory sorted
 * by name, so this file loads last, which is only harmless for custom
 * properties. They resolve at computed-value time rather than in document
 * order; a real rule here would silently jump the queue.
 *
 * There is no dark scheme on purpose. The prototype is a light app with dark
 * sections — the navy heroes on home, wallet and rewards are part of the
 * design, not a theme. Inverting them would be a different app.
 */

:root {
  --teal-50: #eafbf9;
  --teal-100: #c7f3ee;
  --teal-200: #8fe6dc;
  --teal-300: #4de8d6;
  --teal-400: #1ccabb;
  --teal-500: #0c9c90;
  --teal-600: #0a8479;
  --teal-700: #075c56;
  --teal-800: #053f3b;
  --teal-900: #032826;

  --pink-50: #fdf0fb;
  --pink-100: #f9dcf3;
  --pink-200: #f3b5e7;
  --pink-300: #e97fd6;
  --pink-400: #d454c4;
  --pink-500: #b83aa8;
  --pink-600: #8f2e83;
  --pink-700: #6b2262;
  --pink-800: #481744;
  --pink-900: #2c0e29;

  --navy-950: #070c14;
  --navy-900: #0b1220;
  --navy-800: #101a2c;
  --navy-700: #182640;
  --navy-600: #25395c;

  --gray-50: #f6f7f8;
  --gray-100: #e9ebee;
  --gray-200: #d3d7dd;
  --gray-300: #aeb4bd;
  --gray-400: #818386;
  --gray-500: #666a70;
  --gray-600: #4c4f55;
  --gray-700: #34363b;
  --gray-800: #1f2124;
  --gray-900: #131417;

  --white: #ffffff;

  --brand-teal: var(--teal-500);
  --brand-pink: var(--pink-400);

  --surface-page: var(--white);
  --surface-card: var(--white);
  --surface-sunken: var(--gray-50);
  --surface-overlay: rgb(11 18 32 / 60%);

  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-tertiary: var(--gray-400);
  --text-brand: var(--teal-600);
  --text-link: var(--teal-600);
  --text-link-hover: var(--teal-700);

  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-dark: var(--navy-600);

  --action-primary: var(--teal-500);
  --action-primary-hover: var(--teal-600);
  --action-accent: var(--pink-400);
  --action-accent-hover: var(--pink-500);
  --action-disabled: var(--gray-200);
  --action-disabled-text: var(--gray-400);
  --focus-ring: var(--teal-400);

  --semantic-success: var(--teal-500);
  --semantic-success-bg: var(--teal-50);
  --semantic-warning: #e0a531;
  --semantic-warning-bg: #fdf5e5;
  --semantic-danger: #d94f4f;
  --semantic-danger-bg: #fdecec;
  --semantic-info: var(--pink-400);
  --semantic-info-bg: var(--pink-50);

  /* Philippine banknotes, approximated. A preset chip wears the colour of the
     note it names, which is a thing a customer already knows without being
     told. ₱20 is a coin now; the note was orange. */
  --note-20: #e08a2e;
  --note-50: #c0392b;
  --note-100: #8e6fb0;
  --note-200: #4c9a2a;
  --note-500: #eab308;
  --note-1000: #2d6cb5;

  --gradient-vice: linear-gradient(100deg, var(--pink-400) 0%, var(--pink-300) 25%, var(--teal-300) 65%, var(--teal-500) 100%);
  --gradient-dusk: linear-gradient(160deg, var(--navy-900) 0%, var(--pink-800) 55%, var(--teal-700) 100%);

  --font-body: "Open Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --text-h1: 1.75rem;
  --text-h2: 1.5rem;
  --text-h3: 1.25rem;
  --text-h4: 1.0625rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;
  --text-overline: 0.6875rem;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.12em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(11 18 32 / 8%);
  --shadow-md: 0 4px 16px rgb(11 18 32 / 10%);
  --shadow-lg: 0 12px 32px rgb(11 18 32 / 14%);
  --shadow-glow-teal: 0 0 0 1px rgb(12 156 144 / 25%), 0 8px 24px rgb(12 156 144 / 25%);
  --shadow-glow-pink: 0 0 0 1px rgb(212 84 196 / 25%), 0 8px 24px rgb(212 84 196 / 25%);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* The tab bar is fixed, so page content has to reserve its height. One token
     keeps the bar and the padding that clears it from drifting apart. */
  --tab-bar-height: 62px;
  --screen-max-width: 30rem;

  /* The console is read standing at a bay, on a phone, by someone holding a
     cable. 44px is the floor for anything tappable there — .button's 52px is
     the comfortable size for a primary action, this is the minimum for a link
     in a table cell that used to be bare text. */
  --tap-min: 44px;

  /* The console's own column. Wider than a phone screen on purpose: seven
     columns of charge points inside --screen-max-width is why the desktop
     console reads like a phone app someone stretched. */
  --console-max-width: 64rem;
}