/* colors.css — colour tokens from Helix iOS (HLXTheme). Light is default; dark is class-driven: `.dark` on <html> (the web app's convention, set by ThemeProvider) or [data-theme="dark"]. Unlike the iOS web tokens, dark does NOT follow prefers-color-scheme — the web library's dark: utilities only fire under .dark, so following the OS would half-apply.
   Source: web/helix-tokens.css (HELIX web foundations), which mirrors HLXTheme.swift,
   HLXTypography.swift and HLXMetrics.swift. 1 iOS pt = 1 CSS px. */

:root {
  /* Fixed colors — same in both modes */
  --hlx-file-stage: #0A0D11;
  --hlx-stage-scrim: rgb(12 17 22 / 0.72);
  --hlx-stage-scrim-rim: rgb(255 255 255 / 0.22);
  --hlx-on-stage-track: rgb(255 255 255 / 0.12);
  --hlx-on-stage-well: rgb(255 255 255 / 0.06);
  --hlx-on-stage-well-rim: rgb(255 255 255 / 0.14);
  --hlx-photo-scrim: rgb(12 17 22 / 0.5);
  --hlx-photo-caption-gradient: linear-gradient(to top, rgb(6 9 13 / 0.85), rgb(6 9 13 / 0.10)); /* @kind color */
  --hlx-on-photo: #FFFFFF;
  --hlx-on-photo-muted: rgb(255 255 255 / 0.78);
  --hlx-thumb-ground: #4E5D6E;
}

/* Light — default */
:root,
.light,
[data-theme="light"] {
  color-scheme: light;
  --hlx-background: #F4F6F8;
  --hlx-surface: #FFFFFF;
  --hlx-sunken: #E8EDF2;
  --hlx-selected: #FFFFFF;
  --hlx-text-primary: #101418;
  --hlx-text-secondary: #5A6472;
  --hlx-text-tertiary: #8A94A2;
  --hlx-placeholder: #A2ABB6;
  --hlx-eyebrow-ink: #5A6472;
  --hlx-brand: #7387A0;
  --hlx-accent: #4E657E;
  --hlx-container: #E8EDF2;
  --hlx-hero-ink: #1B2836;
  --hlx-on-container: #39506A;
  --hlx-on-container-muted: #4E657E;
  --hlx-on-container-strong: #101418;
  --hlx-action-fill: #4E657E;
  --hlx-action-pressed: #3E5267;
  --hlx-on-action: #FFFFFF;
  --hlx-hairline: #DFE4EA;
  --hlx-focus: #4E657E;
  --hlx-ok: #3F7A55;
  --hlx-warning: #D98324;
  --hlx-warning-surface: #FBEEDC;
  --hlx-warning-text: #8A5310;
  --hlx-error: #B4472F;
  --hlx-error-text: #9E3A24;
  --hlx-on-error: #FFFFFF;
  --hlx-progress-track: #E8EDF2;
  --hlx-progress-indicator: #7387A0;
  --hlx-row-active: #E8EDF2;
  --hlx-avatar-fill-strong: #CFD9E3;
  --hlx-confidential-ink: #39506A;
  --hlx-confidential-fill: #E8EDF2;
  --hlx-confidential-border: #C6D0DA;
  --hlx-favorite: #2E3A47;
  --hlx-favorite-off: #7C8796;
  --hlx-ink-done-alpha: 80%;
  --hlx-ink-waiting-alpha: 60%;
  --hlx-scrim: rgb(11 16 22 / 0.55);
  --hlx-focus-ring-alpha: 22%;
}

/* Light — forced */
.light, [data-theme="light"] {
  color-scheme: light;
  --hlx-background: #F4F6F8;
  --hlx-surface: #FFFFFF;
  --hlx-sunken: #E8EDF2;
  --hlx-selected: #FFFFFF;
  --hlx-text-primary: #101418;
  --hlx-text-secondary: #5A6472;
  --hlx-text-tertiary: #8A94A2;
  --hlx-placeholder: #A2ABB6;
  --hlx-eyebrow-ink: #5A6472;
  --hlx-brand: #7387A0;
  --hlx-accent: #4E657E;
  --hlx-container: #E8EDF2;
  --hlx-hero-ink: #1B2836;
  --hlx-on-container: #39506A;
  --hlx-on-container-muted: #4E657E;
  --hlx-on-container-strong: #101418;
  --hlx-action-fill: #4E657E;
  --hlx-action-pressed: #3E5267;
  --hlx-on-action: #FFFFFF;
  --hlx-hairline: #DFE4EA;
  --hlx-focus: #4E657E;
  --hlx-ok: #3F7A55;
  --hlx-warning: #D98324;
  --hlx-warning-surface: #FBEEDC;
  --hlx-warning-text: #8A5310;
  --hlx-error: #B4472F;
  --hlx-error-text: #9E3A24;
  --hlx-on-error: #FFFFFF;
  --hlx-progress-track: #E8EDF2;
  --hlx-progress-indicator: #7387A0;
  --hlx-row-active: #E8EDF2;
  --hlx-avatar-fill-strong: #CFD9E3;
  --hlx-confidential-ink: #39506A;
  --hlx-confidential-fill: #E8EDF2;
  --hlx-confidential-border: #C6D0DA;
  --hlx-favorite: #2E3A47;
  --hlx-favorite-off: #7C8796;
  --hlx-ink-done-alpha: 80%;
  --hlx-ink-waiting-alpha: 60%;
  --hlx-scrim: rgb(11 16 22 / 0.55);
  --hlx-focus-ring-alpha: 22%;
}

/* Dark — forced */
.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --hlx-background: #07090C;
  --hlx-surface: #121519;
  --hlx-sunken: #1B222A;
  --hlx-selected: #2C353F;
  --hlx-text-primary: #E4E9EE;
  --hlx-text-secondary: #ADB7C3;
  --hlx-text-tertiary: #838E9C;
  --hlx-placeholder: #838E9C;
  --hlx-eyebrow-ink: #A6B0BD;
  --hlx-brand: #7387A0;
  --hlx-accent: #AEC2D9;
  --hlx-container: #28577F;
  --hlx-hero-ink: #122031;
  --hlx-on-container: #DCE7F2;
  --hlx-on-container-muted: #C9D8E8;
  --hlx-on-container-strong: #FFFFFF;
  --hlx-action-fill: #7387A0;
  --hlx-action-pressed: #A8BBD1;
  --hlx-on-action: #0E1216;
  --hlx-hairline: #2E3640;
  --hlx-focus: #AEC2D9;
  --hlx-ok: #6FB88A;
  --hlx-warning: #E0A050;
  --hlx-warning-surface: #2E2211;
  --hlx-warning-text: #EFC489;
  --hlx-error: #B4472F;
  --hlx-error-text: #E8836C;
  --hlx-on-error: #FFFFFF;
  --hlx-progress-track: #28577F;
  --hlx-progress-indicator: #AEC2D9;
  --hlx-row-active: #2C353F;
  --hlx-avatar-fill-strong: #3E4A58;
  --hlx-confidential-ink: #93A8C0;
  --hlx-confidential-fill: #1B222A;
  --hlx-confidential-border: #37414D;
  --hlx-favorite: #DCE3EA;
  --hlx-favorite-off: #626C7A;
  --hlx-ink-done-alpha: 72%;
  --hlx-ink-waiting-alpha: 50%;
  --hlx-scrim: rgb(6 9 13 / 0.66);
  --hlx-focus-ring-alpha: 20%;
}

/* Derived tints — declared wherever a theme is, so they follow it */
:root,
[data-theme],
.light,
.dark {
  --hlx-accent-fill: color-mix(in srgb, var(--hlx-accent) 12%, transparent);
  --hlx-accent-border: color-mix(in srgb, var(--hlx-accent) 45%, transparent);
  --hlx-focus-ring: color-mix(in srgb, var(--hlx-focus) var(--hlx-focus-ring-alpha), transparent);
  --hlx-confidential-quiet: var(--hlx-text-secondary);
  --hlx-ink-done: color-mix(in srgb, var(--hlx-text-primary) var(--hlx-ink-done-alpha), transparent);
  --hlx-ink-waiting: color-mix(in srgb, var(--hlx-text-primary) var(--hlx-ink-waiting-alpha), transparent);
}

/* iOS-only colour tokens not in helix-tokens.css — from TOKENS.md, dark values per DarkRefresh/README.md */
:root, .light, [data-theme="light"] {
  --hlx-dot-filled: #4E657E;
  --hlx-dot-empty: #7C8796;
  --hlx-key-pressed: #E8EDF2;
  --hlx-grid-minor: rgb(255 255 255 / 0.05);
  --hlx-grid-major: rgb(255 255 255 / 0.11);
  --hlx-hero-wash: transparent;
}
/* Light — forced */
.light, [data-theme="light"] {
  --hlx-dot-filled: #4E657E;
  --hlx-dot-empty: #7C8796;
  --hlx-key-pressed: #E8EDF2;
  --hlx-grid-minor: rgb(255 255 255 / 0.05);
  --hlx-grid-major: rgb(255 255 255 / 0.11);
  --hlx-hero-wash: transparent;
}
.dark,
[data-theme="dark"] {
  --hlx-dot-filled: #AEC2D9;
  --hlx-dot-empty: #626C7A;
  --hlx-key-pressed: #28577F;
  --hlx-grid-minor: rgb(174 194 217 / 0.07);
  --hlx-grid-major: rgb(174 194 217 / 0.14);
  --hlx-hero-wash: rgb(40 87 127 / 0.55);
}