/* ============================================================
 * tokens.css — design tokens for the Amigo Partner Portal
 *
 * Single source of truth. Components reference --vars only.
 *
 * THEMING MODEL
 * -------------
 * Two switches drive the entire look:
 *   1. data-theme="light|dark"   on <html> — light/dark
 *   2. --primary  (and --secondary, --logo)  — per-tenant branding
 *
 * Derived shades (--primary-50/100/600/700) are computed from --primary
 * via color-mix(), so changing --primary at runtime re-skins the app
 * without touching the rest of the file. Theme Studio writes a single
 * <style> rule to the page; the rest follows.
 * ============================================================ */

:root,
[data-theme="light"] {
  /* ----- BRAND (overridable per tenant) ----- */
  --primary:        #4B47A8;
  --secondary:      #E0B127;   /* gold accent — used SPARINGLY (brand dot, super-user) */

  /* derived from --primary — DO NOT hard-code, use color-mix so brand swaps cascade */
  --primary-50:     color-mix(in srgb, var(--primary) 10%, white);
  --primary-100:    color-mix(in srgb, var(--primary) 18%, white);
  --primary-600:    color-mix(in srgb, var(--primary) 88%, black);
  --primary-700:    color-mix(in srgb, var(--primary) 76%, black);
  --primary-glow:   color-mix(in srgb, var(--primary) 35%, transparent);  /* shadow / bloom — composites over the page bg */
  --primary-fg:     #FFFFFF;   /* text on a primary-filled surface */

  /* secondary derivations — same shape as primary, scoped for the
     login decoration's "secondary accent" duties (orbital nodes,
     brand pill, magic-link icon, corner orb). Used SPARINGLY. */
  --secondary-deep: color-mix(in srgb, var(--secondary) 80%, black);
  --secondary-soft: color-mix(in srgb, var(--secondary) 14%, transparent);
  --secondary-ring: color-mix(in srgb, var(--secondary) 30%, transparent);
  --secondary-glow: color-mix(in srgb, var(--secondary) 40%, transparent);

  /* dot-grid hue used by the login decoration SVG. Subtle by design. */
  --grid:           color-mix(in srgb, var(--primary) 8%, transparent);

  /* ----- SURFACES ----- */
  --bg:             #FFFFFF;
  --bg-alt:         #F8FAFC;
  --bg-sunken:      #F1F5F9;
  --bg-inverse:     #0F172A;

  /* Editable form-control surface. ~3% lift toward --text so editable
     inputs read as "interactive slot" without competing with semantic
     colors. Auto-derives from --text + --bg, so the dark theme picks up
     the lift automatically (no override needed). DO NOT reuse for
     hover / disabled — that's --bg-alt's job; per Step 4 Rule 3 a single
     color cannot encode two meanings. See ui-design-guidelines.md
     "Editable input affordance" for the full rule. */
  --bg-input:       color-mix(in srgb, var(--text) 3%, var(--bg));

  /* ----- TEXT ----- */
  --text:           #0F172A;
  --text-2:         #475569;
  --text-3:         #64748B;
  --text-4:         #94A3B8;
  --text-on-primary:#FFFFFF;

  /* ----- BORDERS ----- */
  --border:         #E2E8F0;
  --border-strong:  #CBD5E1;

  /* ----- SEMANTIC ----- */
  --success:        #15803D;
  --success-bg:     #F0FDF4;
  --success-border: #BBF7D0;

  --warning:        #B45309;
  --warning-bg:     #FFFBEB;
  --warning-border: #FDE68A;

  --danger:         #DC2626;
  --danger-bg:      #FEF2F2;
  --danger-border:  #FECACA;

  --info:           #0369A1;
  --info-bg:        #F0F9FF;
  --info-border:    #BAE6FD;

  /* ----- DECORATIVE ACCENT PALETTE -----
   * Five brand-derived hue/lightness variations used to landmark
   * sibling sections that would otherwise read as a uniform wall.
   * Currently consumed by the per-product cards on the Quotation
   * builder (see [data-page="quotations"] .qg-card).
   *
   * Each accent is computed via OKLCH relative color syntax from
   * `--primary` so the cards always belong to the active brand
   * family — there are no fixed teal/amber/rose hues. Tenants who
   * change their primary color get a recolored accent palette for
   * free, matching their brand.
   *
   * Variation strategy (perceptually-balanced):
   *   1. base          — the brand `--primary` itself
   *   2. warm-shifted  — +35° hue toward warm
   *   3. darker        — same hue, lower L
   *   4. cool-shifted  — −35° hue toward cool
   *   5. pastel-shifted— lighter L, lower C, +70° hue
   *
   * Rules of use:
   *   • Decorative only — these colors must not encode meaning. Don't
   *     swap them for status (use `--success` / `--warning` etc.).
   *   • Don't reuse the semantic tokens (success/warning/danger) for
   *     decoration — repurposing them trains users wrong.
   *
   * Browser support: `oklch(from …)` relative color syntax requires
   * Chrome 119+, Safari 16.4+, Firefox 128+ — all evergreen targets
   * the portal supports. */
  --accent-1: var(--primary);
  --accent-2: oklch(from var(--primary) l calc(c * 0.92) calc(h + 35));
  --accent-3: oklch(from var(--primary) calc(l - 0.10) c calc(h - 6));
  --accent-4: oklch(from var(--primary) l calc(c * 0.88) calc(h - 35));
  --accent-5: oklch(from var(--primary) calc(l + 0.06) calc(c * 0.78) calc(h + 70));

  /* ----- FILE-TYPE SEMANTICS ----- */
  --pdf:            #DC2626;
  --pdf-bg:         #FEF2F2;
  --pdf-border:     #FECACA;

  --link:           #0369A1;
  --link-bg:        #F0F9FF;
  --link-border:    #BAE6FD;

  --installer:      #15803D;
  --installer-bg:   #F0FDF4;
  --installer-border: #BBF7D0;

  /* ----- ELEVATION (light) ----- */
  --shadow-1:       0 1px 1px rgba(20, 22, 28, 0.04);
  --shadow-2:       0 2px 6px rgba(20, 22, 28, 0.06);
  --shadow-3:       0 6px 16px rgba(20, 22, 28, 0.08);
  --shadow-drawer:  -8px 0 24px rgba(20, 22, 28, 0.07);
  --shadow-menu:    0 4px 14px rgba(20, 22, 28, 0.10), 0 1px 2px rgba(20, 22, 28,0.05);

  /* Semantic elevation — purpose-named, components bind to these directly.
   * (--shadow-1/2/3 stay for back-compat with external consumers; new code
   * should reach for the purpose-named tokens below.) */
  --shadow-card:               0 1px 2px rgba(20, 22, 28, 0.06);
  --shadow-card-elevated:      0 8px 20px rgba(20, 22, 28, 0.08);
  --shadow-glow-primary:       0 4px 18px var(--primary-glow);
  --shadow-glow-primary-hover: 0 6px 22px var(--primary-glow);
  /* Modal composite: a primary-tinted glow ringing the dialog edge plus
   * the standard elevation underneath. Tokenized so the single-line lint
   * rule has no multi-line blind spot in components.css. */
  --shadow-modal-glow:         0 0 40px -8px color-mix(in srgb, var(--primary) 22%, transparent), var(--shadow-3);

  /* Focus rings — semantic by tint. Theme-bound so brand recolors propagate. */
  --ring-focus:         0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  --ring-focus-soft:    0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
  --ring-focus-danger:  0 0 0 3px color-mix(in srgb, var(--danger)  14%, transparent);
  --ring-focus-success: 0 0 0 2px color-mix(in srgb, var(--success) 18%, transparent);
  --backdrop:       rgba(15, 23, 42, 0.32);
  --backdrop-strong:rgba(15, 23, 42, 0.40);

  /* Dropdown chevron + search-input icon — themed via URL tokens because
     data: URLs can't read CSS vars. Light variants here use text-3
     (#64748B); dark overrides live in themes.css. */
  --select-chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  --input-search-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");

  /* ----- RADII ----- */
  /* Four-tier scale. Anything that doesn't fit one of these tiers gets
   * mapped to the nearest. No --radius-xl / --radius-modal / etc. —
   * the single source of truth lives here. */
  --radius-sm:   3px;
  --radius:      5px;
  --radius-lg:   7px;
  --radius-pill: 999px;

  /* ----- SPACING (4-pt scale) ----- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ----- TYPOGRAPHY ----- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs:  10.5px;
  --fs-sm:  11.5px;
  --fs-md:  12.5px;
  --fs-base: 13px;
  --fs-lg:  14px;
  --fs-xl:  16px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-4xl: 32px;

  --lh-tight: 1.25;
  --lh-base:  1.45;
  --lh-loose: 1.6;

  /* ----- LAYOUT ----- */
  --top-h:     56px;
  --nav-w:     240px;
  --nav-w-collapsed: 56px;
  --nav-w-current:   var(--nav-w);  /* swapped to --nav-w-collapsed by JS */
  --drawer-w:  520px;
  --page-max:         min(2000px, 100vw - calc(var(--page-pad-x) * 2));  /* default — fluid, capped at 2000 */
  --page-max-narrow:  min(1080px, 100vw - calc(var(--page-pad-x) * 2));  /* forms / nav hubs / auth */
  --page-pad-x: 28px;
  --page-pad-y: 24px;

  /* ----- MOTION ----- */
  --dur-1: 100ms;
  --dur-2: 180ms;
  --dur-3: 220ms;
  --ease-out: cubic-bezier(.32, .72, .32, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);

  /* ----- Z-INDEX ----- */
  --z-nav:     20;
  --z-drawer:  50;
  --z-modal:   60;
  --z-menu:    65;
  --z-toast:   70;
  --z-tooltip: 80;
}
