/**
 * css/tokens.css
 * Ampra OS — Design tokens (neutral placeholder)
 *
 * Replace --color-accent-* and --palette-accent-* with the exact brand hex
 * from ampra.ai in a single pass; no other file needs to change.
 */

:root {

  /* 1. PALETTE PRIMITIVES — not used directly in components */
  --palette-white:      #ffffff;
  --palette-gray-50:    #f8fafc;
  --palette-gray-100:   #f1f5f9;
  --palette-gray-200:   #e2e8f0;
  --palette-gray-300:   #cbd5e1;
  --palette-gray-400:   #94a3b8;
  --palette-gray-500:   #64748b;
  --palette-gray-600:   #475569;
  --palette-gray-700:   #334155;
  --palette-gray-800:   #1e293b;
  --palette-gray-900:   #0f172a;

  /* Brand accent — REAL ampra.ai palette (captured from ampra.ai). The brand is a
     cyan->magenta gradient; the solid accent scale is the violet gradient-midpoint. */
  --palette-accent-300: #e0c3fc;
  --palette-accent-400: #c084fc;
  --palette-accent-500: #a855f7;
  --palette-accent-600: #9333ea;   /* primary action — ampra violet */
  --palette-accent-700: #7e22ce;

  /* ampra signature gradient endpoints + lockup */
  --brand-cyan:     #22d3ee;
  --brand-magenta:  #ff00dd;
  --brand-gradient: linear-gradient(95deg, #22d3ee 0%, #8b5cf6 50%, #ff00dd 100%);

  /* Status primitives */
  --palette-green-100:  #dcfce7;
  --palette-green-600:  #16a34a;
  --palette-green-700:  #15803d;
  --palette-amber-100:  #fef3c7;
  --palette-amber-600:  #d97706;
  --palette-amber-700:  #b45309;
  --palette-red-100:    #fee2e2;
  --palette-red-600:    #dc2626;
  --palette-red-700:    #b91c1c;

  /* 2. SEMANTIC SURFACE / TEXT / BORDER */
  --color-bg-page:        var(--palette-gray-50);
  --color-bg-surface:     var(--palette-white);
  --color-bg-subtle:      var(--palette-gray-100);
  --color-bg-muted:       var(--palette-gray-200);

  --color-sidebar-bg:     var(--palette-gray-800);
  --color-sidebar-text:   var(--palette-gray-300);
  --color-sidebar-active: var(--palette-white);
  --color-sidebar-hover:  var(--palette-gray-700);

  --color-portal-sidebar-bg:     var(--palette-white);
  --color-portal-sidebar-text:   var(--palette-gray-600);
  --color-portal-sidebar-active: var(--palette-accent-600);

  --color-text-primary:   var(--palette-gray-900);
  --color-text-secondary: var(--palette-gray-600);
  --color-text-muted:     var(--palette-gray-400);
  --color-text-inverse:   var(--palette-white);
  --color-text-on-accent: var(--palette-white);

  --color-border:         var(--palette-gray-200);
  --color-border-strong:  var(--palette-gray-300);
  --color-border-focus:   var(--palette-accent-500);

  /* 3. BRAND ACCENT — primary actions, active nav, stage-progress fills */
  --color-accent:         var(--palette-accent-600);
  --color-accent-hover:   var(--palette-accent-700);
  --color-accent-subtle:  var(--palette-accent-300);
  --color-accent-bg:      #faf5ff;

  /* 4. STATUS COLORS — RESERVED for scorecard, health badges, rock status, priority */
  --color-status-green:        var(--palette-green-600);
  --color-status-green-bg:     var(--palette-green-100);
  --color-status-amber:        var(--palette-amber-600);
  --color-status-amber-bg:     var(--palette-amber-100);
  --color-status-red:          var(--palette-red-600);
  --color-status-red-bg:       var(--palette-red-100);

  /* 5. SPACING SCALE (4px base) */
  --space-0:   0px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* 6. TYPE SCALE — 14px internal (dense), 16px portal (narrative), tabular numerals on numbers */
  --font-family-base:     'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-size-xs:         11px;
  --font-size-sm:         12px;
  --font-size-base:       14px;
  --font-size-md:         16px;
  --font-size-lg:         18px;
  --font-size-xl:         20px;
  --font-size-2xl:        24px;
  --font-size-3xl:        30px;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --line-height-tight:    1.25;
  --line-height-base:     1.5;
  --line-height-relaxed:  1.75;
  --font-variant-numeric: tabular-nums;

  /* 7. RADIUS / SHADOW */
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     8px;
  --radius-xl:     12px;
  --radius-full:   9999px;
  --shadow-sm:     0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:     0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg:     0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-xl:     0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.05);
  --shadow-drawer: -4px 0 24px 0 rgb(0 0 0 / 0.12);

  /* 8. TRANSITION */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* 9. LAYOUT */
  --sidebar-width:      220px;
  --topbar-height:      52px;
  --drawer-width:       420px;
  --content-max-width:  1280px;

  /* ==========================================================================
   * 10. SHORTHAND ALIASES — consumed by app.css, shell.js, and page modules.
   * The shell and pages reference compact names (--surface, --text-xs,
   * --weight-semibold, ...). Map them onto the semantic tokens above so the
   * whole app resolves from one palette; the brand swap still happens in
   * section 1 only.
   * ======================================================================== */

  /* surfaces / text / borders */
  --bg:             var(--color-bg-page);
  --bg-inset:       var(--color-bg-subtle);
  --surface:        var(--color-bg-surface);
  --border:         var(--color-border);
  --border-strong:  var(--color-border-strong);
  --text:           var(--color-text-primary);
  --text-mid:       var(--color-text-secondary);
  --text-muted:     var(--color-text-muted);

  /* internal-app chrome (dark sidebar) */
  --chrome:          var(--color-sidebar-bg);
  --chrome-hover:    var(--color-sidebar-hover);
  --text-on-chrome:  var(--color-sidebar-text);

  /* accent */
  --primary:        var(--color-accent);
  --primary-hover:  var(--color-accent-hover);
  --primary-subtle: var(--color-accent-bg);
  --primary-border: var(--palette-accent-300);

  /* status */
  --success:        var(--color-status-green);
  --success-bg:     var(--color-status-green-bg);
  --warning:        var(--color-status-amber);
  --warning-bg:     var(--color-status-amber-bg);
  --warning-border: #fde68a;
  --warning-text:   var(--palette-amber-700);
  --danger:         var(--color-status-red);
  --danger-bg:      var(--color-status-red-bg);

  /* brand/shared chips (role badge, client picker) */
  --color-brand-100:  var(--color-accent-bg);
  --color-brand-600:  var(--palette-accent-600);
  --color-shared-50:  var(--color-accent-bg);
  --color-shared-200: var(--palette-accent-300);

  /* type */
  --font-sans: var(--font-family-base);
  --text-xs:   var(--font-size-xs);
  --text-sm:   var(--font-size-sm);
  --text-base: var(--font-size-base);
  --text-md:   var(--font-size-md);
  --text-lg:   var(--font-size-lg);
  --text-xl:   var(--font-size-xl);
  --text-2xl:  var(--font-size-2xl);
  --text-3xl:  var(--font-size-3xl);
  --text-4xl:  36px;
  --weight-normal:   var(--font-weight-normal);
  --weight-medium:   var(--font-weight-medium);
  --weight-semibold: var(--font-weight-semibold);
  --weight-bold:     var(--font-weight-bold);
  --leading-tight:   var(--line-height-tight);
  --leading-snug:    1.375;
  --leading-normal:  var(--line-height-base);
  --leading-relaxed: var(--line-height-relaxed);

  /* spacing half-steps */
  --space-1-5: 6px;
  --space-2-5: 10px;

  /* z-index scale */
  --z-base:    1;
  --z-sidebar: 100;
  --z-topbar:  200;
  --z-modal:   900;
}

/* ==========================================================================
 * DARK THEME — driven by data-theme="dark" on <html>.
 *
 * Built FROM Ampra's own brand, not a generic gray dark mode. The signature
 * cyan->violet->magenta gradient, the violet accent, and the white logo chip
 * are all preserved unchanged. Only the SURFACE / TEXT / BORDER tokens are
 * remapped to a dark "ink" set tuned around Ampra's gray-900 (#0f172a),
 * lifted slightly so cards separate from the page. Status tints are pushed to
 * dark, low-saturation backgrounds with bright text so badges stay legible.
 *
 * Strategy: remapping the SEMANTIC tokens here cascades to every component,
 * because app.css and the page modules resolve from these tokens (or use them
 * as `var(--token, #fallback)`, where the token wins). Section 10 aliases that
 * are direct copies of section-2 tokens inherit automatically; the few aliases
 * with their own literal values are restated below.
 * ======================================================================== */

:root[data-theme="dark"] {

  /* --- Dark ink surface ramp, derived from Ampra's gray-900 (#0f172a) --- */
  --ink-base:    #0b1120;   /* page — a touch darker than gray-900 */
  --ink-surface: #131c2e;   /* card / panel */
  --ink-raised:  #1b2638;   /* hover / subtle raised */
  --ink-muted:   #243149;   /* muted fills, inputs */
  --ink-border:  #2c3a52;   /* hairline borders */
  --ink-border-strong: #3a4a66;

  /* 2. SEMANTIC SURFACE / TEXT / BORDER (dark) */
  --color-bg-page:        var(--ink-base);
  --color-bg-surface:     var(--ink-surface);
  --color-bg-subtle:      var(--ink-raised);
  --color-bg-muted:       var(--ink-muted);

  /* Sidebar: keep it dark (it already was), nudge to match the new ink so the
     whole chrome reads as one piece. */
  --color-sidebar-bg:     #0a0f1c;
  --color-sidebar-text:   #c4cee0;
  --color-sidebar-active: var(--palette-white);
  --color-sidebar-hover:  #1b2638;

  /* Client portal sidebar flips from white to dark ink. */
  --color-portal-sidebar-bg:     var(--ink-surface);
  --color-portal-sidebar-text:   #c4cee0;
  --color-portal-sidebar-active: var(--palette-accent-400);

  --color-text-primary:   #e8edf7;
  --color-text-secondary: #aeb9cd;
  --color-text-muted:     #7c89a3;
  --color-text-inverse:   var(--palette-gray-900);
  --color-text-on-accent: var(--palette-white);

  --color-border:         var(--ink-border);
  --color-border-strong:  var(--ink-border-strong);
  --color-border-focus:   var(--palette-accent-400);

  /* 3. BRAND ACCENT — lift the violet one step for contrast on dark ink,
     keep the gradient endpoints exactly as the brand defines them. */
  --color-accent:         var(--palette-accent-500);
  --color-accent-hover:   var(--palette-accent-400);
  --color-accent-subtle:  #3b1d63;
  --color-accent-bg:      #221033;   /* violet-tinted dark wash (was #faf5ff) */

  /* 4. STATUS — dark, low-sat backgrounds + bright foregrounds. The solid
     status colors are brightened so text/dots read on dark surfaces. */
  --color-status-green:        #34d399;
  --color-status-green-bg:     #0f2e23;
  --color-status-amber:        #fbbf24;
  --color-status-amber-bg:     #332710;
  --color-status-red:          #f87171;
  --color-status-red-bg:       #361a1c;

  /* 7. SHADOWS — deeper on dark so elevation still reads. */
  --shadow-sm:     0 1px 2px 0 rgb(0 0 0 / 0.45);
  --shadow-md:     0 4px 6px -1px rgb(0 0 0 / 0.50), 0 2px 4px -2px rgb(0 0 0 / 0.40);
  --shadow-lg:     0 10px 15px -3px rgb(0 0 0 / 0.55), 0 4px 6px -4px rgb(0 0 0 / 0.40);
  --shadow-xl:     0 20px 25px -5px rgb(0 0 0 / 0.60), 0 8px 10px -6px rgb(0 0 0 / 0.45);
  --shadow-drawer: -4px 0 24px 0 rgb(0 0 0 / 0.55);

  /* 10. ALIAS RESTATEMENTS — these section-10 aliases carry their OWN literal
     values (not a var() of a section-2 token), so they must be remapped here. */
  --primary-subtle: var(--color-accent-bg);
  --primary-border: var(--palette-accent-500);
  --warning-border: #4a3a14;
  --warning-text:   #fcd34d;

  /* brand/shared chips that used literal-ish accent washes */
  --color-brand-100:  var(--color-accent-bg);
  --color-shared-50:  var(--color-accent-bg);
  --color-shared-200: var(--palette-accent-500);

  /* status sub-tokens used by some pages (e.g. --success-bg literal) follow
     section-2 via section-10 aliases automatically. */
}

/* Smooth the flip so a manual toggle isn't jarring. Pre-paint load has no
   transition (attribute is set before first paint), so there is no flash. */
:root.theme-anim,
:root.theme-anim body,
:root.theme-anim #sidebar,
:root.theme-anim #topbar,
:root.theme-anim #content,
:root.theme-anim .stat-card,
:root.theme-anim .ph-section {
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

/* --------------------------------------------------------------------------
 * BRAND — ampra logo lockup + signature gradient (captured from ampra.ai)
 * The captured wordmark has a baked white background, so it sits in a white
 * "chip" that reads cleanly on the dark sidebar and the light login card.
 * ---------------------------------------------------------------------- */
.brand-logo { height: 22px; width: auto; display: block; max-width: 100%; object-fit: contain; }
.brand-logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: #ffffff; padding: 6px 11px; border-radius: var(--radius-lg);
}
.brand-logo-chip--lg { padding: 8px 14px; }
.brand-logo-chip--lg .brand-logo { height: 30px; }

/* Gradient brand accents */
.brand-gradient-text {
  /* Solid violet fallback first, so unsupported browsers show legible text
     instead of transparent. background-clip:text overrides it where supported. */
  color: var(--palette-accent-600);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-gradient-text {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.btn-brand-gradient, .btn--gradient {
  background: var(--brand-gradient) !important; color: #fff !important; border: none !important;
}