/* GENERATED — DO NOT EDIT. Source: shared/ui/tokens.css
   sha256:a676f31dee94a2152e97701e68ba1f85e14bc96e8db726935105141363c766e0
   Re-sync: node shared/ui/scripts/sync-tokens.mjs */
/* =============================================================================
   Florida AI Partners — Canonical Design Tokens
   -----------------------------------------------------------------------------
   ONE source of truth for color, type, space, radius, shadow & z-index across
   every spoke. Vendored into each adopter's public/vendor/tokens.css by
   shared/ui/scripts/sync-tokens.mjs (drift-checked by check-tokens.mjs).

   ARCHITECTURE (three layers — reference downward, never upward):
     1. RAW PALETTE  (--fap-*)   the ONLY place hex values live. The rebrand
                                 swap point: change a palette value, re-sync,
                                 and every spoke re-skins. Do NOT reference
                                 --fap-* outside the semantic roles below.
     2. SEMANTIC ROLES (--color-*) what the UI actually uses. Light by default;
                                 re-pointed wholesale in the dark block.
     3. SCALES (--text/--space/--radius/--shadow/--z-) theme-agnostic.

   The brand is a PLACEHOLDER (rebrand ~Aug 2026). These tokens are deliberately
   brand-AGNOSTIC plumbing so that rebrand = edit the palette block once.
   ============================================================================= */

:root {
  /* --- 1. RAW PALETTE — rebrand swap point (do not reference outside roles) --- */
  --fap-teal: #009ca8;        /* Florida teal — primary brand (brand/BRAND.md) */
  --fap-teal-deep: #007a83;   /* AA-safe teal for links/text on white */
  --fap-teal-bright: #3cc3da; /* brighter teal — text/links on dark surfaces */
  --fap-orange: #fc6000;      /* sunrise orange — accent / the "AI" */
  --fap-orange-deep: #c24a00; /* AA-safe orange for solid CTAs / accent ink */
  --fap-orange-darker: #a33e00;
  --fap-navy: #002454;        /* deep navy — headings, depth */
  --fap-navy-soft: #14365e;
  --fap-peach: #fcccb4;       /* peach sun-glow — warm highlight */
  --fap-accent-wash: #fff1ea; /* faint orange wash */
  --fap-ivory: #f7f4ef;       /* warm ivory — page base */
  --fap-cream: #f1ece3;       /* soft cream — banded surface */
  --fap-white: #ffffff;
  --fap-line-warm: #e7e0d4;
  --fap-text: #1d2733;        /* body text on light */
  --fap-muted: #5a6570;
  /* semantic-state hues (light) */
  --fap-green: #1c7a4a;
  --fap-amber: #9a6700;
  --fap-red: #b3261e;

  /* --- 2. SEMANTIC ROLES (light default — everything references THESE) --- */
  --color-bg: var(--fap-ivory);            /* page base */
  --color-surface: var(--fap-white);       /* cards / panels */
  --color-surface-2: var(--fap-cream);     /* raised / banded */
  --color-surface-hover: #efe9df;
  --color-line: var(--fap-line-warm);      /* hairlines / borders */

  --color-ink: var(--fap-navy);            /* headings / strong text */
  --color-text: var(--fap-text);           /* body text */
  --color-muted: var(--fap-muted);         /* secondary text */

  --color-brand: var(--fap-teal);          /* brand fills, active states */
  --color-brand-strong: var(--fap-teal-deep); /* brand text/links (AA on white) */
  --color-on-brand: var(--fap-white);      /* text on a brand fill */

  --color-accent: var(--fap-orange);       /* accent fills */
  --color-accent-strong: var(--fap-orange-deep); /* accent CTA / hover (AA) */
  --color-accent-ink: var(--fap-orange-deep);    /* accent text on light */
  --color-accent-wash: var(--fap-accent-wash);   /* faint accent background */
  --color-on-accent: var(--fap-white);

  --color-highlight: var(--fap-peach);

  /* state role pairs: a readable foreground + a tinted surface */
  --color-success: var(--fap-green);   --color-success-bg: #e8f6ee;
  --color-warning: var(--fap-amber);   --color-warning-bg: #fff6e6;
  --color-danger:  var(--fap-red);     --color-danger-bg:  #fdeceb;
  --color-info:    var(--fap-teal-deep); --color-info-bg:  #eef9fa;

  --color-focus-ring: rgba(0, 156, 168, 0.45);

  /* --- 3a. TYPE --- */
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Lora", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.8125rem;   /* 13 */
  --text-base: 0.9375rem; /* 15 — compact app body (CRM) */
  --text-md: 1rem;        /* 16 — inputs (no iOS zoom), comfortable body */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.25rem;     /* 20 */
  --text-2xl: 1.5rem;     /* 24 */
  --text-3xl: 1.9rem;     /* ~30 */
  --text-4xl: clamp(2rem, 4vw, 2.75rem);

  --leading-tight: 1.15;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --tracking-tight: -0.02em;

  /* --- 3b. SPACE (4px base) --- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- 3c. RADIUS (reconciles the 9/12/14/18/22/999 spread) --- */
  --radius-sm: 9px;
  --radius: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* --- 3d. SHADOW (light) --- */
  --shadow-sm: 0 1px 3px rgba(11, 34, 57, 0.08);
  --shadow: 0 8px 24px rgba(11, 34, 57, 0.07), 0 1px 2px rgba(11, 34, 57, 0.06);
  --shadow-lg: 0 28px 60px rgba(11, 34, 57, 0.16);

  /* --- 3e. Z-INDEX --- */
  --z-base: 0;
  --z-sticky: 20;
  --z-dropdown: 40;
  --z-overlay: 60;
  --z-modal: 80;
  --z-toast: 100;
}

/* =============================================================================
   DARK THEME — opt in by setting [data-theme="dark"] on <html>. Re-points the
   SEMANTIC roles only (+ shadows); scales are inherited. The CRM's previously
   "drifted" teal #0e8aa1 lives here as the INTENTIONAL dark value of
   --color-brand, so the CRM renders identically once it adopts these tokens.
   ============================================================================= */
[data-theme="dark"] {
  --color-bg: #0f141b;
  --color-surface: #19212c;
  --color-surface-2: #232e3b;
  --color-surface-hover: #2a3645;
  --color-line: #2b3744;

  --color-ink: #e9eef4;
  --color-text: #e9eef4;
  --color-muted: #94a3b4;

  --color-brand: #0e8aa1;          /* dark-tuned teal (white text stays legible) */
  --color-brand-strong: var(--fap-teal-bright); /* brighter teal for on-dark text */
  --color-on-brand: #ffffff;

  --color-accent: var(--fap-orange);
  --color-accent-strong: #ff7a33;
  --color-accent-ink: #ff8c4d;
  --color-accent-wash: #2a1c10;
  --color-on-accent: #1a0f06;

  --color-highlight: var(--fap-peach);

  --color-success: #5fd38a;  --color-success-bg: #143120;
  --color-warning: #e6b549;  --color-warning-bg: #382c13;
  --color-danger:  #f08a80;  --color-danger-bg:  #3a2020;
  --color-info:    #5cc8dd;  --color-info-bg:    #0f2e38;

  --color-focus-ring: rgba(60, 195, 218, 0.5);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 8, 25, 0.5);

  color-scheme: dark;
}