/* RiOT light theme for Twenty CRM (crm.bbfp.net) — v1 2026-10-24
   Palette source: riotmios.com [data-theme="light"]
     paper #F7F5F0 · card #FFFFFF · ink #12161C · muted #4A5560 · faint #7A8692
     gold #9A7510 · teal #1A7A8C
   How it works: Twenty 2.x ships its theme as CSS custom properties (--t-*)
   inside a cascade @layer. Unlayered rules always beat layered ones, so this
   file overrides tokens without patching the bundle. Served from
   dist/front/riot-theme.css (swarm config) and linked into index.html by the
   server entrypoint wrapper in twenty-stack.yml. */

html.light,
html.light body,
.light {
  /* accent scale (Radix-style 1..12) built on RiOT gold */
  --t-accent-accent1: #fdfcf8;
  --t-accent-accent2: #faf6ec;
  --t-accent-accent3: #f5edd8;
  --t-accent-accent4: #efe2bf;
  --t-accent-accent5: #e8d5a3;
  --t-accent-accent6: #dec584;
  --t-accent-accent7: #cfaf5c;
  --t-accent-accent8: #b8922f;
  --t-accent-accent9: #9a7510;
  --t-accent-accent10: #8a690e;
  --t-accent-accent11: #7a5c0d;
  --t-accent-accent12: #3d2e07;
  --t-accent-primary: #e8d5a3;
  --t-accent-secondary: #e8d5a3;
  --t-accent-tertiary: #f5edd8;
  --t-accent-quaternary: #faf6ec;
  --t-accent-accent3570: #b8922f;
  --t-accent-accent4060: #b8922f;

  /* Twenty's "blue" = its primary action color → RiOT gold */
  --t-color-blue: #9a7510;
  --t-color-blue1: #fdfcf8;
  --t-color-blue2: #faf6ec;
  --t-color-blue3: #f5edd8;
  --t-color-blue4: #efe2bf;
  --t-color-blue5: #e8d5a3;
  --t-color-blue6: #dec584;
  --t-color-blue7: #cfaf5c;
  --t-color-blue8: #b8922f;
  --t-color-blue9: #9a7510;
  --t-color-blue10: #8a690e;
  --t-color-blue11: #7a5c0d;
  --t-color-blue12: #3d2e07;
  --t-border-color-blue: #cfaf5c;
  --t-background-transparent-blue: rgba(154, 117, 16, 0.08);
  --t-buttons-secondary-text-color: #7a5c0d;
  --t-font-color-on-accent: #ffffff;

  /* surfaces: white cards on warm paper */
  --t-background-primary: #ffffff;
  --t-background-secondary: #f7f5f0;
  --t-background-tertiary: #efece4;
  --t-background-quaternary: #e6e2d8;
  --t-background-inverted-primary: #12161c;
  --t-background-primary-inverted: #12161c;
  --t-background-primary-inverted-hover: #2a313b;
  --t-background-radial-gradient: radial-gradient(50% 62.62% at 50% 0%, #2a313b 0%, #12161c 100%);
  --t-background-radial-gradient-hover: radial-gradient(76.32% 95.59% at 50% 0%, #3a4350 0%, #1c222b 100%);

  /* ink */
  --t-font-color-primary: #12161c;
  --t-font-color-secondary: #4a5560;
  --t-font-color-tertiary: #7a8692;
  --t-font-color-light: #9aa6b2;
  --t-font-color-extra-light: #c3cad1;

  /* hairlines (warm) */
  --t-border-color-strong: #d6d0c2;
  --t-border-color-medium: #e6e2d8;
  --t-border-color-light: #efece4;
  --t-border-color-inverted: #12161c;

  --theme-light-background-secondary: #f7f5f0;
}

html.light,
html.light body {
  background-color: #f7f5f0;
}

/* dark mode (per-user choice in Settings → Experience): keep RiOT gold accent */
html.dark,
html.dark body,
.dark {
  --t-accent-accent9: #d4a017;
  --t-accent-accent10: #e0b23a;
  --t-accent-accent11: #e8c25e;
  --t-accent-accent8: #a87f12;
  --t-accent-accent3570: #a87f12;
  --t-accent-accent4060: #a87f12;
  --t-accent-primary: #4a3a0c;
  --t-accent-secondary: #4a3a0c;
  --t-accent-tertiary: #2e2408;
  --t-accent-quaternary: #1f1906;
  --t-color-blue: #d4a017;
  --t-color-blue9: #d4a017;
  --t-color-blue10: #e0b23a;
  --t-color-blue11: #e8c25e;
  --t-border-color-blue: #a87f12;
  --t-background-transparent-blue: rgba(212, 160, 23, 0.12);
  --t-buttons-secondary-text-color: #e8c25e;
}

/* RiOT gold hairline across the top of the app */
html.light body::before,
html.dark body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2147483000;
  pointer-events: none;
  background: linear-gradient(90deg, #12161c 0%, #9a7510 35%, #d4a017 50%, #9a7510 65%, #12161c 100%);
}