/* bridge.css — points the web library's semantic tokens (shadcn names + legacy --helix-*) at the
   iOS tokens. The vendor CSS declares these inside @layer theme/base; these rules are unlayered, so
   they win. Declared on every theme scope so var() re-resolves under .dark. */

:root, .light, .dark, [data-theme] {
  /* Type */
  --font-sans: var(--hlx-font-ui);
  --font-mono: var(--hlx-font-mono);
  --font-weight-medium: 600;          /* iOS uses two weights: 400 + 600 */

  /* Surfaces */
  --background: var(--hlx-background);
  --foreground: var(--hlx-text-primary);
  --card: var(--hlx-surface);
  --card-foreground: var(--hlx-text-primary);
  --popover: var(--hlx-surface);
  --popover-foreground: var(--hlx-text-primary);
  --menu-surface: var(--hlx-surface);
  --dropdown-surface: var(--hlx-surface);
  --dropdown-surface-foreground: var(--hlx-text-primary);
  --secondary: var(--hlx-sunken);
  --secondary-foreground: var(--hlx-text-primary);
  --muted: var(--hlx-sunken);
  --muted-foreground: var(--hlx-text-secondary);
  --grid-chrome: var(--hlx-sunken);

  /* Action + interaction */
  --primary: var(--hlx-action-fill);
  --primary-foreground: var(--hlx-on-action);
  --accent: var(--hlx-accent-fill);   /* iOS web hover fill */
  --accent-foreground: var(--hlx-text-primary);
  --button-secondary-hover: var(--hlx-accent-fill);
  --button-secondary-hover-foreground: var(--hlx-text-primary);
  --destructive: var(--hlx-error);
  --destructive-foreground: var(--hlx-on-error);

  /* Lines */
  --border: var(--hlx-hairline);
  --input: var(--hlx-hairline);
  --ring: var(--hlx-focus);

  /* Charts — the iOS accent + semantic set, no new hues */
  --chart-1: var(--hlx-accent);
  --chart-2: var(--hlx-ok);
  --chart-3: var(--hlx-warning);
  --chart-4: var(--hlx-brand);
  --chart-5: var(--hlx-error);

  /* Chrome (top bar / nav) */
  --sidebar: var(--hlx-chrome);
  --sidebar-foreground: var(--hlx-on-chrome);
  --sidebar-primary: var(--hlx-chrome-accent);
  --sidebar-primary-foreground: var(--hlx-on-chrome);
  --sidebar-accent: var(--hlx-chrome-hover);
  --sidebar-accent-foreground: var(--hlx-on-chrome);
  --sidebar-border: var(--hlx-chrome-border);
  --sidebar-ring: var(--hlx-chrome-accent);

  /* Legacy brand names still referenced by components */
  --helix-navy: var(--hlx-chrome);
  --helix-navy-deep: var(--hlx-action-fill);
  --helix-navy-dark: var(--hlx-action-pressed);
  --helix-navy-light: var(--hlx-brand);
  --helix-accent: var(--hlx-chrome-accent);
  --helix-green: var(--hlx-ok);
  --helix-green-dark: var(--hlx-ok);
  --helix-red: var(--hlx-error);
  --helix-red-dark: var(--hlx-error-text);

  /* Radii — iOS scale */
  --radius: 10px;
  --radius-xs: 3px;
  --radius-sm: var(--hlx-radius-status);        /* 5 */
  --radius-md: var(--hlx-radius-control-web);   /* 8 */
  --radius-lg: var(--hlx-radius-control);       /* 10 */
  --radius-xl: var(--hlx-radius-card);          /* 16 */
  --radius-2xl: var(--hlx-radius-screen);       /* 24 */
}

/* Tailwind palette colours used directly by components (status dots, flags, tags, dark: grounds).
   Remapped to FIXED iOS values (light + dark palettes), not theme-aware tokens, because components
   already pick explicit dark shades under dark: — flipping them would invert. Teal / purple / sky
   have no iOS counterpart and are left as-is (see Delta). */
:root {
  --color-gray-50: #F4F6F8; --color-gray-100: #E8EDF2; --color-gray-200: #DFE4EA; --color-gray-300: #C6D0DA; --color-gray-400: #A2ABB6;
  --color-gray-500: #8A94A2; --color-gray-600: #5A6472; --color-gray-700: #3E4A58; --color-gray-800: #2C353F; --color-gray-900: #1B222A;
  --color-neutral-50: #F4F6F8;
  --color-slate-300: #C6D0DA; --color-slate-600: #5A6472; --color-slate-700: #3E4A58; --color-slate-800: #2C353F; --color-slate-900: #1B222A;
  --color-red-50: color-mix(in srgb, #B4472F 8%, #FFFFFF); --color-red-100: color-mix(in srgb, #B4472F 14%, #FFFFFF);
  --color-red-300: #E8836C; --color-red-400: #E8836C; --color-red-500: #B4472F; --color-red-600: #B4472F; --color-red-700: #9E3A24; --color-red-800: #9E3A24;
  --color-red-900: color-mix(in srgb, #B4472F 40%, #121519);
  --color-orange-100: #FBEEDC; --color-orange-300: #EFC489; --color-orange-500: #D98324; --color-orange-800: #8A5310; --color-orange-900: #2E2211;
  --color-amber-50: #FBEEDC; --color-amber-200: #FBEEDC; --color-amber-300: #EFC489; --color-amber-600: #D98324; --color-amber-800: #8A5310; --color-amber-900: #2E2211; --color-amber-950: #2E2211;
  --color-yellow-100: #FBEEDC; --color-yellow-300: #EFC489; --color-yellow-500: #E0A050; --color-yellow-600: #D98324; --color-yellow-800: #8A5310; --color-yellow-900: #2E2211;
  --color-green-100: color-mix(in srgb, #3F7A55 14%, #FFFFFF); --color-green-300: #6FB88A; --color-green-500: #3F7A55; --color-green-600: #3F7A55;
  --color-green-800: color-mix(in srgb, #3F7A55 75%, #000000); --color-green-900: color-mix(in srgb, #3F7A55 35%, #121519); --color-emerald-500: #3F7A55;
  --color-blue-100: #E8EDF2; --color-blue-300: #AEC2D9; --color-blue-400: #AEC2D9; --color-blue-500: #4E657E; --color-blue-600: #4E657E; --color-blue-800: #39506A; --color-blue-900: #28577F;
}

/* "Aspen" layout — the light-sidebar skin. Surface-based, iOS style. */
[data-layout="aspen"], [data-layout="aspen"].dark {
  --sidebar: var(--hlx-surface);
  --sidebar-foreground: var(--hlx-text-primary);
  --sidebar-primary: var(--hlx-accent);
  --sidebar-primary-foreground: var(--hlx-on-action);
  --sidebar-accent: var(--hlx-accent-fill);
  --sidebar-accent-foreground: var(--hlx-text-primary);
  --sidebar-border: var(--hlx-hairline);
  --sidebar-ring: var(--hlx-focus);
}

/* Paint the page ground on <html> itself (not only via body propagation) so card thumbnails and captures never fall through to black. */
html{background:var(--background);color:var(--foreground);color-scheme:light}html.dark{color-scheme:dark}body{min-height:100vh}