/* Mina Rides — Colour tokens
   Ocean, sand & sunset. Two blues carry the brand; warm island tones bring the heat.
   60 / 30 / 10 — navy & shell lead, sky blue supports, terracotta + sea glass accent. */

:root {
  /* ---- Brand palette (raw) ---- */
  --mina-navy: #334EAC;      /* PRIMARY  — the road, the mark */
  --sky-blue: #7096D1;       /* SECONDARY — supporting blue */
  --deep-ocean: #0A205C;     /* darkest blue — text on light, dark surfaces */
  --sky-mist: #D1E5FE;       /* palest blue — tints, fills */
  --terracotta: #A26A4D;     /* warm accent — sunset clay */
  --sand: #CDB297;           /* warm neutral — beach */
  --sea-glass: #8DB4B1;      /* cool accent — shallows */
  --shell: #FEFAEF;          /* warm off-white — the canvas */
  --white: #FFFFFF;
  --ink: #11131A;            /* near-black for max-contrast text */

  /* ---- Tints & shades (derived, harmonious) ---- */
  --navy-700: #28408F;
  --navy-600: #2E47A0;
  --navy-300: #8095CF;
  --navy-100: #E3E9F7;
  --sky-200: #A9C2E6;
  --terracotta-700: #835640;
  --terracotta-100: #EFE2D9;
  --sea-glass-100: #E2EDEC;
  --sand-100: #F1E9DF;

  /* ---- Semantic surfaces ---- */
  --surface-page: var(--shell);          /* default app/page background */
  --surface-card: var(--white);          /* cards, sheets */
  --surface-sunken: #F4EFE3;             /* recessed wells on shell */
  --surface-inverse: var(--deep-ocean);  /* dark sections, footers */
  --surface-brand: var(--mina-navy);     /* brand-filled blocks */
  --surface-tint: var(--sky-mist);       /* soft blue fill */

  /* ---- Semantic text ---- */
  --text-strong: var(--deep-ocean);      /* headlines */
  --text-body: #2A3142;                  /* body copy */
  --text-muted: #5E667A;                 /* captions, secondary */
  --text-on-brand: var(--shell);         /* text on navy */
  --text-on-dark: var(--shell);          /* text on deep ocean */
  --text-link: var(--mina-navy);

  /* ---- Borders & lines ---- */
  --border-subtle: #E7E0D2;              /* hairlines on shell */
  --border-default: #D8D0BF;
  --border-strong: var(--sky-blue);
  --border-focus: var(--mina-navy);

  /* ---- Accents (the 10%) ---- */
  --accent-warm: var(--terracotta);
  --accent-cool: var(--sea-glass);

  /* ---- Status (kept on-brand) ---- */
  --status-success: #3F8F6B;
  --status-success-bg: #E2F0E9;
  --status-warning: var(--terracotta);
  --status-warning-bg: var(--terracotta-100);
  --status-danger: #C0492F;
  --status-danger-bg: #F6E1DB;
  --status-info: var(--mina-navy);
  --status-info-bg: var(--navy-100);
}