/* TuiWorks master brand v1.0.0 | 2026-10-20 | sRGB
   Source of truth: https://drive.google.com/drive/folders/1M4CS0fmhQI3tJHjtoXIuearaGkQ_Tr6n
   Tokens only: map existing components to these roles. Do not change layouts,
   content, typography, logo geometry, theme-switching behavior, or semantics.
   Brand orange is identical in all themes; do not create hover orange variants.
   Use charcoal text on orange. Orange text on white is not accessible.
*/
:root {
  --tw-brand-orange: #FF8218;
  --tw-brand-charcoal: #222222;
}

:root, [data-theme="light"] {
  --tw-background: #FAF9F7;
  --tw-surface: #FFFFFF;
  --tw-surface-raised: #F1F0ED;
  --tw-text: #222222;
  --tw-text-secondary: #5C5C5C;
  --tw-border-subtle: #D8D6D2;
  --tw-border-control: #767676;
  --tw-link: #222222;
  --tw-focus: #222222;
  --tw-navigation-background: #222222;
  --tw-navigation-text: #F7F7F5;
  --tw-navigation-active: #FF8218;
  --tw-navigation-focus: #FF8218;
  --tw-primary-background: #FF8218;
  --tw-primary-text: #222222;
  --tw-primary-border: #222222;
}

[data-theme="dark"] {
  --tw-background: #222222;
  --tw-surface: #2C2C2C;
  --tw-surface-raised: #343434;
  --tw-text: #F7F7F5;
  --tw-text-secondary: #C7C7C2;
  --tw-border-subtle: #4A4A4A;
  --tw-border-control: #8A8A84;
  --tw-link: #FF8218;
  --tw-focus: #FF8218;
  --tw-navigation-background: #222222;
  --tw-navigation-text: #F7F7F5;
  --tw-navigation-active: #FF8218;
  --tw-navigation-focus: #FF8218;
  --tw-primary-background: #FF8218;
  --tw-primary-text: #222222;
  --tw-primary-border: #FF8218;
}

/* Integration rules:
   1. Keep existing theme detection. Map another selector to the dark token block
      if the site uses .dark or a different data attribute.
   2. Primary CTA: background primary-background, text primary-text,
      border 1px solid primary-border. Add a visible focus outline with offset.
   3. Use navigation-focus inside the charcoal navigation, in BOTH themes.
   4. Keep button orange constant on hover/active; change underline, border,
      shadow or pressed position instead, respecting reduced-motion settings.
   5. Underline body links. Do not rely on color alone for active/error states.
   6. border-subtle is decorative only. Use border-control for form/control edges
      that must identify a component; test against the actual adjacent surface.
   7. Do not globally replace colors in photos, illustrations, third-party marks,
      charts or success/warning/error/info states. Brand and semantic roles differ.
   8. WCAG minimums: normal text 4.5:1, large text 3:1, required non-text UI 3:1.
      Contrast depends on actual background, opacity, gradients and overlays.
*/