/* Torro design tokens.
   Palette v4 — "Iris": the logo stays coral (#FF5B5D, brand only — logo tile, story ring);
   the interface accent is a calm iris blue-violet (#5B5BD6), the cool counterpart of the warm coral.
   Red is never the accent: red = danger, green = yes/confirmed, iris = "you are here / act here".
   White on #5B5BD6 = 5.4:1 (AA for text, so counts and filled buttons carry white);
   #5B5BD6 on white = 5.4:1, so accent text can be the accent itself in light mode.
   Navigation: selected = filled icon + bold label in ink, no colour; on desktop on a neutral grey fill. */

:root {
  --page-w: 1120px;          /* content pages on desktop: Tasks, Crew, Offers, Chat, Calendar, Settings, Notifications */
  --page-pad: 32px;
  /* Accent */
  --color-accent: #5B5BD6;               /* iris: fills, icons, indicators, text (5.4:1 on white) */
  --color-on-accent: #FFFFFF;            /* text/icons on a filled accent: 5.4:1 */
  --color-accent-text: #5050CC;          /* accent-coloured text: 6.1:1 on white */
  --color-accent-soft: rgba(91, 91, 214, 0.08);
  --brand-coral: #FF5B5D;                /* the logo colour */
  --color-badge: #FF5B5D;                /* notification / unread counts = logo coral, white number */
  --color-on-badge: #FFFFFF;
  --brand-tile: #FF5B5D;                 /* logo tile */
  --brand-from: #FF9A6B;                 /* story ring gradient */
  --brand-to: #FF5B5D;

  /* Neutrals */
  --color-ink: #17171C;                  /* primary text, 17:1 */
  --color-ink-2: #4A4A55;                /* unselected navigation, secondary labels */
  --color-ink-muted: #6B6B76;            /* captions, placeholders — 5.3:1 on white */
  --color-bg: #F5F5F7;
  --color-surface: #FFFFFF;
  --color-field: #EFEFF3;                /* inputs, chips, secondary buttons */
  --color-logo: #414141;                 /* wordmark ink from the brand files */
  --color-line: rgba(23, 23, 28, 0.08);  /* hairlines */
  --color-line-strong: rgba(23, 23, 28, 0.14);
  --color-hover: rgba(23, 23, 28, 0.05);
  --color-danger: #A8201A;
  --color-warn: #996A00;               /* amber ink for mid priority: 4.6:1 on white */
  --color-success: #12A150;
  --color-toggle-track: #EFEFF3;
  --color-toggle-off: #B9B9C3;

  /* Navigation states — icon and label are tuned separately:
     idle icons sit quieter than their labels (icons carry shape, labels carry meaning);
     active = filled icon + bold label in ink (desktop: on a neutral grey fill). */
  --nav-icon: #868692;                   /* 3.6:1 — UI graphics minimum is 3:1 */
  --nav-text: #5E5E69;                   /* 6.4:1 */
  --nav-icon-hover: #4A4A55;
  --nav-text-hover: #17171C;
  --nav-icon-active: #17171C;            /* selected tab = filled icon in ink, no colour */
  --nav-text-active: #17171C;
  --nav-bg-hover: rgba(23, 23, 28, 0.04);
  --nav-bg-active: rgba(23, 23, 28, 0.06);

  /* Elevation — hairline first, soft shadow only for floating layers */
  --shadow-bar: 0 var(--hairline) 0 var(--color-line);
  --shadow-bar-up: 0 calc(-1 * var(--hairline)) 0 var(--color-line);
  --shadow-float: 0 0 0 var(--hairline) var(--color-line-strong), 0 12px 40px rgba(17, 17, 28, 0.12);

  /* Lines: 1px on standard screens, a true hairline on retina */
  --hairline: 1px;

  /* Type */
  --font-ui: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-nav: 10px;
  --fs-field: 16px;              /* 16px minimum: iOS zooms into smaller inputs on focus */

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-full: 999px;

  /* Size */
  --header-h: 56px;
  --tabbar-h: 56px;
  --rail-w: 96px;
  --tap: 40px;
  --icon: 20px;

  color-scheme: light;
}

@media (min-resolution: 2dppx) {
  :root { --hairline: 0.5px; }
}

/* Dark: near-black, not pure black (less halation, keeps depth between layers) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-accent: #5B5BD6;             /* fills with white text (5.4:1) */
    --color-on-accent: #FFFFFF;
    --color-accent-text: #A5A4F8;        /* 8.4:1 on the dark background */
    --color-accent-soft: rgba(124, 122, 240, 0.16);
    --nav-icon-active: #F2F2F5;
    --color-ink: #F2F2F5;
    --color-ink-2: #C4C4CE;
    --color-ink-muted: #9A9AA6;          /* 6.9:1 on bg, 6.2:1 on surface */
    --color-bg: #0F0F12;
    --color-surface: #18181C;
    --color-field: #26262D;
    --color-logo: #F2F2F5;
    --color-line: rgba(255, 255, 255, 0.07);
    --color-line-strong: rgba(255, 255, 255, 0.12);
    --color-hover: rgba(255, 255, 255, 0.06);
    --color-danger: #FF9A8A;
    --color-warn: #E8B54A;
    --color-success: #3DD68C;
    --color-toggle-track: #26262D;
    --color-toggle-off: #6E6E7A;
    --nav-icon: #7C7C88;
    --nav-text: #ADADB8;
    --nav-icon-hover: #C4C4CE;
    --nav-text-hover: #F2F2F5;
    --nav-text-active: #F2F2F5;
    --nav-bg-hover: rgba(255, 255, 255, 0.05);
    --nav-bg-active: rgba(255, 255, 255, 0.08);
    --shadow-float: 0 0 0 var(--hairline) var(--color-line-strong), 0 16px 48px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-accent: #5B5BD6;
  --color-on-accent: #FFFFFF;
  --color-accent-text: #A5A4F8;
  --color-accent-soft: rgba(124, 122, 240, 0.16);
  --nav-icon-active: #F2F2F5;
  --color-ink: #F2F2F5;
  --color-ink-2: #C4C4CE;
  --color-ink-muted: #9A9AA6;
  --color-bg: #0F0F12;
  --color-surface: #18181C;
  --color-field: #26262D;
  --color-logo: #F2F2F5;
  --color-line: rgba(255, 255, 255, 0.07);
  --color-line-strong: rgba(255, 255, 255, 0.12);
  --color-hover: rgba(255, 255, 255, 0.06);
  --color-danger: #FF9A8A;
  --color-warn: #E8B54A;
  --color-success: #3DD68C;
  --color-toggle-track: #26262D;
  --color-toggle-off: #6E6E7A;
  --nav-icon: #7C7C88;
  --nav-text: #ADADB8;
  --nav-icon-hover: #C4C4CE;
  --nav-text-hover: #F2F2F5;
  --nav-text-active: #F2F2F5;
  --nav-bg-hover: rgba(255, 255, 255, 0.05);
  --nav-bg-active: rgba(255, 255, 255, 0.08);
  --shadow-float: 0 0 0 var(--hairline) var(--color-line-strong), 0 16px 48px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* Logo: coral tile + white mark in both themes; the wordmark follows --color-logo (currentColor) */
.brand-tile { fill: var(--brand-tile); }
.brand-mark { fill: #FFFFFF; }