:root {
    color-scheme: light;

    --sc-bg: #F7F8FA;
    --sc-bg-subtle: #EFF1F4;
    --sc-surface: #FFFFFF;
    --sc-surface-alt: #F5F6F8;
    --sc-elevated: #FFFFFF;
    --sc-border: #D8DDE3;
    --sc-border-strong: #AEB7C1;
    --sc-text: #111820;
    --sc-text-secondary: #44505C;
    --sc-text-muted: #5F6A75;
    --sc-text-inverse: #FFFFFF;
    --sc-primary: #117A3B;
    --sc-primary-hover: #0F6132;
    --sc-on-primary: #FFFFFF;
    --sc-accent: #1B66A8;
    --sc-accent-text: #1B66A8;
    --sc-on-accent: #FFFFFF;
    --sc-accent-subtle: #E6F0F9;
    --sc-success: #167A4A;
    --sc-warning: #B4520A;
    --sc-danger: #C02525;
    --sc-info: #1B66A8;
    --sc-focus: #1DB954;
    --sc-selection-bg: #DCE6F6;
    --sc-selection-text: #111820;
    --sc-scrollbar-thumb: #AEB7C1;
    --sc-scrollbar-track: #EFF1F4;

    --sc-font-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --sc-font-display: 'ArchivoExpanded', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sc-font-mono: 'SpaceMono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;

    --sc-bg: #0B0D0F;
    --sc-bg-subtle: #111418;
    --sc-surface: #171A1E;
    --sc-surface-alt: #1C2025;
    --sc-elevated: #22272D;
    --sc-border: rgba(255,255,255,0.10);
    --sc-border-strong: rgba(255,255,255,0.20);
    --sc-text: #F4F6F8;
    --sc-text-secondary: #B8C0C7;
    --sc-text-muted: #98A1AA;
    --sc-text-inverse: #07120B;
    --sc-primary: #1ED760;
    --sc-primary-hover: #3BE477;
    --sc-on-primary: #07120B;
    --sc-accent: #6BB6F0;
    --sc-accent-text: #8AC9F6;
    --sc-on-accent: #07131C;
    --sc-accent-subtle: rgba(107,182,240,0.14);
    --sc-success: #4ADE9A;
    --sc-warning: #F0A94A;
    --sc-danger: #FF7A7A;
    --sc-info: #6BB6F0;
    --sc-focus: #1ED760;
    --sc-selection-bg: rgba(170,182,240,0.20);
    --sc-selection-text: #F4F6F8;
    --sc-scrollbar-thumb: #3B424A;
    --sc-scrollbar-track: #111418;
  }

  /* Self-hosted brand faces. The CSP blocks the Google Fonts CDN, so these are
     served from /fonts (public/) alongside the expo-font registration in
     app/_layout.tsx. Both files are variable on the weight axis (100–900);
     Archivo Expanded is the wdth-125 instance of the same superfamily. */
  @font-face {
    font-family: 'Archivo';
    src: url('/fonts/Archivo-Variable.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'ArchivoExpanded';
    src: url('/fonts/ArchivoExpanded-Variable.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'SpaceMono';
    src: url('/fonts/SpaceMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  /* Document-flow reset. Deliberately NOT expo-router's ScrollViewStyleReset:
     that reset pins html/body/#root to height:100% and sets
     body { overflow: hidden }, which locks every page to the viewport (the
     sign-in form clipped under the footer, docH == winH). Here the page is a
     normally-flowing document: short pages still fill the viewport via
     min-height, tall pages scroll the window. Screens that keep an internal
     ScrollView still work: their flex parents are viewport-bounded by the
     roots' min-height chain. */
  html, body, #root {
    min-height: 100%;
  }

  #root {
    display: flex;
    flex-direction: column;
  }

  /* react-native-web gives every top-level <Text> a base atomic class that
     compiles to the shorthand "font: 14px System", which beats the
     body { font-family } declaration above, so Archivo only rendered where a
     style explicitly set fontFamily. The RNW base class is a single atomic
     class (0,1,0); the ID + attribute selector here is (1,1,0) plus :not()
     classes, so it outranks it. Display/mono text opts out via the .sc-display
     and .sc-mono classes (set by components/ui/Text.tsx and the direct
     fonts.display / fonts.mono call sites). */
  #root [dir="auto"]:not(.sc-display):not(.sc-mono) { font-family: var(--sc-font-body); }
  #root .sc-display, #root .sc-display [dir="auto"] { font-family: var(--sc-font-display); }
  #root .sc-mono,    #root .sc-mono    [dir="auto"] { font-family: var(--sc-font-mono); }

  body {
    margin: 0;
    background: var(--sc-bg);
    color: var(--sc-text);
    font-family: var(--sc-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),
                color 200ms cubic-bezier(0.2, 0, 0, 1);
  }

  ::selection {
    background: var(--sc-selection-bg);
    color: var(--sc-selection-text);
  }

  * {
    scrollbar-color: var(--sc-scrollbar-thumb) var(--sc-scrollbar-track);
  }

  /* Chrome/Safari paint autofilled inputs light-blue, which breaks the field
     treatment on auth screens in both themes. Repaint them to match the themed
     inputs. Injected here because the NativeWind/Tailwind pipeline strips raw
     rules from global.css. */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--sc-surface-alt) inset !important;
    -webkit-text-fill-color: var(--sc-text) !important;
    caret-color: var(--sc-text);
    transition: background-color 9999s ease-in-out 0s;
  }

  @media (prefers-reduced-motion: reduce) {
    body {
      transition: none;
    }
  }