/* =============================================================================
   TOKENS.CSS  —  Single Source of Brand Truth
   All design decisions live here. Everything else references these.
   To retheme the product: edit only this file.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS CASCADE LAYERS — explicit ordering, no specificity battles
   ───────────────────────────────────────────────────────────────────────────── */
@layer tokens, reset, layout, components, utilities;


/* ─────────────────────────────────────────────────────────────────────────────
   1. PRIMITIVE PALETTE  —  raw named values, never used directly in components
   ───────────────────────────────────────────────────────────────────────────── */
@layer tokens {
:root {

  /* Neutrals */
  --primitive-ink:       #1A1A1A;
  --primitive-bone:      #F4F4F1;
  --primitive-stone:     #EEEDE9;
  --primitive-white:     #FFFFFF;
  --primitive-muted:     #7A7A74;
  --primitive-pale:      #AEADA8;
  --primitive-rule:      #E5E5E0;
  --primitive-hairline:  rgba(26, 26, 26, 0.10);

  /* Brand signal */
  --primitive-oxblood:   #600000;

  /* Extended ink shades */
  --primitive-charcoal:  #3d3d3d;   /* mid-ink, dark badges */
  --primitive-oxblood-dk:#7a0000;   /* oxblood hover state */

  /* ─────────────────────────────────────────────────────────────────────────
     2. SEMANTIC TOKENS  —  purpose-named aliases; these are what CSS uses
     ───────────────────────────────────────────────────────────────────────── */

  /* Surface */
  --c-ink:     var(--primitive-ink);
  --c-bone:    var(--primitive-bone);
  --c-stone:   var(--primitive-stone);
  --c-white:   var(--primitive-white);

  /* Text */
  --c-muted:   var(--primitive-muted);
  --c-pale:    var(--primitive-pale);

  /* Borders */
  --c-rule:     var(--primitive-rule);
  --c-hairline: var(--primitive-hairline);

  /* Signal — oxblood reserved for risk, errors, destructive actions only */
  --c-oxblood:    var(--primitive-oxblood);
  --c-oxblood-dk: var(--primitive-oxblood-dk);
  --c-charcoal:   var(--primitive-charcoal);

  /* Convenience alias — equivalent to --c-muted */
  --c-text-muted: var(--primitive-muted);

  /* Brand aliases — change these to retheme without touching components */
  --brand-primary:       var(--c-ink);
  --brand-accent:        var(--c-oxblood);
  --surface-page:        var(--c-bone);
  --surface-raised:      var(--c-white);
  --surface-sunken:      var(--c-stone);
  --text-default:        var(--c-ink);
  --text-subtle:         var(--c-muted);
  --text-faint:          var(--c-pale);
  --border-default:      var(--c-rule);
  --border-subtle:       var(--c-hairline);

  /* ─────────────────────────────────────────────────────────────────────────
     3. TYPOGRAPHY
     ───────────────────────────────────────────────────────────────────────── */

  --font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  /* Display heading scale — used by pc-h1/h2 shell and brand headings */
  --h1:   clamp(2.35rem, 4vw, 3.55rem);
  --h2:   clamp(1.15rem, 2.2vw, 1.75rem);
  --lead: 1.06rem;   /* lead paragraph / lede */

  /* Type scale — rem values at 16px root */
  --text-2xs:  0.65rem;   /*  ~10px  labels, eyebrows */
  --text-xs:   0.72rem;   /*  ~11px  meta, captions */
  --text-sm:   0.81rem;   /*  ~13px  body small, nav */
  --text-base: 0.875rem;  /*  ~14px  body default */
  --text-md:   1rem;      /*  ~16px  subheadings */
  --text-lg:   1.125rem;  /*  ~18px  section titles */
  --text-xl:   1.375rem;  /*  ~22px  page titles */
  --text-2xl:  1.75rem;   /*  ~28px  hero titles */
  --text-3xl:  2.25rem;   /*  ~36px  display */

  /* Line heights */
  --leading-none:   1;
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.18em;

  /* ─────────────────────────────────────────────────────────────────────────
     4. SPACING SCALE  —  4px base grid
     ───────────────────────────────────────────────────────────────────────── */

  --space-px:  1px;
  --space-0:   0;
  --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;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* Semantic spacing aliases — used by home.css marketing sections */
  --space-xs: var(--space-2);   /*  8px  */
  --space-sm: var(--space-3);   /* 12px  */
  --space-md: var(--space-6);   /* 24px  */
  --space-lg: var(--space-10);  /* 40px  */
  --space-xl: var(--space-16);  /* 64px  */

  /* ─────────────────────────────────────────────────────────────────────────
     5. LAYOUT CONSTANTS
     ───────────────────────────────────────────────────────────────────────── */

  --nav-h:        57px;
  --sidebar-w:    260px;
  --page-max:     1200px;
  --page-narrow:  860px;
  --page-wide:    1300px;

  /* ─────────────────────────────────────────────────────────────────────────
     6. DESIGN RULES  —  enforced globally, never overridden
     ───────────────────────────────────────────────────────────────────────── */

  /* ASTOR system: 0px radius everywhere. No exceptions in app interior. */
  --radius: 0px;

  /* Ambient glow colours — used by .bg-ambient on public shell pages */
  --glow-a: rgba(27, 58, 64, 0.18);
  --glow-b: rgba(130, 96, 255, 0.12);

  /* ─────────────────────────────────────────────────────────────────────────
     LEGACY ALIASES — backward-compat for any remaining inline style="" usage.
     Do not use in new CSS. Canonical equivalents are the --c-* tokens above.
     ───────────────────────────────────────────────────────────────────────── */
  --paper:       var(--c-bone);
  --paper-soft:  var(--c-white);
  --paper-glass: var(--c-white);
  --ink:         var(--c-ink);
  --ink-muted:   var(--c-muted);
  --ink-faint:   var(--c-pale);
  --accent:      var(--c-ink);
  --line:        var(--c-rule);
  --line-soft:   var(--c-hairline);

  /* No box shadows in ASTOR. Depth is expressed through borders only. */
  --shadow-none: none;

  /* Transition defaults */
  --transition-fast:   0.15s ease;
  --transition-base:   0.22s ease;
  --transition-slow:   0.35s ease;

  /* ─────────────────────────────────────────────────────────────────────────
     7. STATUS COLOURS — shared across features (toasts, banners, feedback)
     ───────────────────────────────────────────────────────────────────────── */

  /* Success (green) */
  --status-ok-bg:       #f0fdf4;
  --status-ok-bg-mid:   #d1fae5;
  --status-ok-bg-deep:  #dcfce7;
  --status-ok-border:   #86efac;
  --status-ok-border-md:#bbf7d0;
  --status-ok:          #22c55e;
  --status-ok-bright:   #16a34a;
  --status-ok-text:     #15803d;
  --status-ok-text-dk:  #166534;
  --status-ok-text-dkr: #065f46;
  --status-ok-text-dkst:#14532d;
  --status-ok-accent:   #4ade80;

  /* Error / destructive (red) */
  --status-err-bg:      #fef2f2;
  --status-err-bg-lt:   #fff1f2;   /* rose-50, lighter than fef2f2 */
  --status-err-border:  #fca5a5;
  --status-err:         #ef4444;
  --status-err-mid:     #dc2626;
  --status-err-dk:      #b91c1c;
  --status-err-text:    #7f1d1d;
  --status-err-text-alt:#991b1b;

  /* Success light */
  --status-ok-lt:       #34d399;   /* emerald-400 */

  /* Warning / amber */
  --status-warn:        #f59e0b;
  --status-warn-lt:     #fbbf24;   /* amber-400 */
  --status-warn-dk:     #d97706;
  --status-warn-text-lt:#b45309;   /* amber-700 */
  --status-warn-bg:     #fffbeb;
  --status-warn-bg-alt: #fef3c7;
  --status-warn-bg-deep:#fef9c3;
  --status-warn-border: #fde68a;
  --status-warn-border-dk: #fef08a;
  --status-warn-text:   #92400e;
  --status-warn-text-alt:#854d0e;
  --status-warn-text-dk: #78350f;

  /* ─────────────────────────────────────────────────────────────────────────
     8. PRODUCT TIERS — Pro (blue) & Business (purple)
     Used by marketing.css (pricing, billing, auth upgrade prompts).
     ───────────────────────────────────────────────────────────────────────── */

  --tier-pro:           #2563eb;
  --tier-pro-dk:        #1d4ed8;
  --tier-pro-lt:        #3b82f6;
  --tier-pro-sky:       #7dd3fc;
  --tier-pro-accent:    #93c5fd;
  --tier-pro-bg:        #eff6ff;
  --tier-pro-bg-mid:    #dbeafe;
  --tier-pro-border:    #bfdbfe;

  --tier-biz:           #7c3aed;
  --tier-biz-dk:        #6d28d9;
  --tier-biz-lt:        #c4b5fd;
  --tier-biz-bg:        #ede9fe;
  --tier-biz-bg-lt:     #f5f3ff;
  --tier-biz-bg-pale:   #ddd6fe;   /* violet-200 */

  /* ─────────────────────────────────────────────────────────────────────────
     9. MARKETING NEUTRALS — slate/cool-gray palette for marketing pages
     These map to Tailwind slate. Not used in ASTOR app interior.
     ───────────────────────────────────────────────────────────────────────── */

  --mkt-ink-deep:       #0e141b;
  --mkt-ink-navy:       #1b3a40;
  --mkt-ink-teal:       #1e3a5f;
  --mkt-text-darkest:   #1e293b;
  --mkt-text-dark:      #475569;
  --mkt-text-dark-alt:  #374151;   /* Tailwind gray-700 */
  --mkt-text-mid:       #64748b;
  --mkt-text-light:     #94a3b8;
  --mkt-text-faint:     #9ca3af;
  --mkt-text-pale:      #cbd5e1;

  --mkt-border:         #e2e8f0;
  --mkt-border-lt:      #e5e7eb;
  --mkt-surface:        #f1f5f9;
  --mkt-surface-lt:     #f8fafc;
  --mkt-surface-warm:   #e2ddd6;

  /* Grade-neutral surfaces (shared with pck) */
  --mkt-surface-gray:   #f3f4f6;
  --mkt-text-gray:      #6b7280;

  /* ─────────────────────────────────────────────────────────────────────────
     10. PLANNING CHECKER — grade palette (A–F)
     Used exclusively by css/search.css. Hex is permitted here as single source.
     ───────────────────────────────────────────────────────────────────────── */

  /* Feedback banners */
  --pck-ok-bg:          rgba(22, 163, 74, 0.06);
  --pck-ok-border:      #16a34a;
  --pck-ok-text:        #14532d;
  --pck-ok-text-alt:    #15803d;

  --pck-err-bg:         rgba(220, 38, 38, 0.05);
  --pck-err-border:     #dc2626;
  --pck-err-text:       #7f1d1d;
  --pck-err-text-alt:   #991b1b;

  /* Grade badges — A through F */
  --pck-grade-a-bg:     #dcfce7;
  --pck-grade-a-border: #bbf7d0;
  --pck-grade-a-text:   #166534;

  --pck-grade-b-bg:     #dbeafe;
  --pck-grade-b-border: #bfdbfe;
  --pck-grade-b-text:   #1e40af;

  --pck-grade-c-bg:     #fef9c3;
  --pck-grade-c-border: #fef08a;
  --pck-grade-c-text:   #854d0e;

  --pck-grade-d-bg:     #fee2e2;
  --pck-grade-d-border: #fecaca;
  --pck-grade-d-text:   #991b1b;

  --pck-grade-f-bg:     #f3f4f6;
  --pck-grade-f-border: #e5e7eb;
  --pck-grade-f-text:   #6b7280;

  --pck-grade-none-bg:     #f9fafb;
  --pck-grade-none-border: #e5e7eb;
  --pck-grade-none-text:   #9ca3af;

  /* Amber / warning */
  --pck-amber:          #f59e0b;
  --pck-amber-dk:       #d97706;
  --pck-amber-bg:       #fef3c7;
  --pck-amber-bg-alt:   #fef9c3;
  --pck-amber-border:   #fde68a;
  --pck-amber-text:     #92400e;
  --pck-amber-text-alt: #854d0e;

  /* Neutral surface */
  --pck-surface:        #f9fafb;
  --pck-surface-alt:    #fafafa;

  /* Planning intelligence — grade spectrum (A=green → D=red/orange) */
  --pi-grade-a:         #16a34a;   /* green-600 */
  --pi-grade-b:         #65a30d;   /* lime-700 */
  --pi-grade-c:         #d97706;   /* amber-600 */
  --pi-grade-d:         #ea580c;   /* orange-600 */

  /* Marketing / auth dark surfaces */
  --mkt-ink-darkest:    #111827;   /* Tailwind gray-900 */
  --mkt-ink-darkest-alt:#0b1220;   /* very dark bg */

  /* Auth UI — warm-teal palette (passkeys, recovery-login pages) */
  --auth-teal:          #1b3a40;   /* primary teal (buttons, focus) */
  --auth-teal-hover:    #22474f;   /* teal hover state */
  --auth-warm-border:   #e5e0d8;   /* warm hairline */
  --auth-warm-border-dk:#d1cdc6;   /* slightly darker border */
  --auth-warm-surface:  #faf9f7;   /* input background */
  --auth-warm-surface-lt:#f6f3ee;  /* page background */
  --auth-warm-hover:    #f5f3ef;   /* ghost button hover */
  --auth-warm-hover-dk: #f3f0eb;   /* close button hover */

  /* ─────────────────────────────────────────────────────────────────────────
     11. CRM MODULE — stage, avatar, pipeline palette
     Used exclusively by crm/crm.css.
     ───────────────────────────────────────────────────────────────────────── */

  /* Avatar background palette — 13 distinct hues for letter pairs a–z */
  --crm-av-indigo:   #6366f1;
  --crm-av-teal-dk:  #0d9488;
  --crm-av-emerald:  #10b981;
  --crm-av-violet:   #8b5cf6;
  --crm-av-pink:     #ec4899;
  --crm-av-teal-lt:  #14b8a6;
  --crm-av-orange:   #f97316;
  --crm-av-cyan:     #06b6d4;
  --crm-av-lime:     #84cc16;
  --crm-av-purple:   #a855f7;

  /* CRM stage / pipeline colours */
  --crm-violet:        #5b21b6;   /* negotiation text */
  --crm-pink-bg:       #fce7f3;   /* nurture bg */
  --crm-pink-text:     #9d174d;   /* nurture text */
  --crm-pink:          #be185d;   /* nurture accent */
  --crm-amber-900:     #713f12;   /* qualified text */
  --crm-orange-bg:     #fed7aa;   /* proposal bg */
  --crm-orange-bg-lt:  #ffedd5;   /* proposal bg light */
  --crm-orange-text:   #7c2d12;   /* proposal text */
  --crm-orange:        #c2410c;   /* proposal accent */
  --crm-gold:          #C5A059;   /* pipeline gold stat */
  --crm-linkedin:      #0a66c2;   /* LinkedIn brand */

  /* ── home.css component-scoped aliases ── */
  --ql-bone:      var(--c-bone);
  --ql-white:     var(--c-white);
  --ql-stone:     var(--c-stone);
  --ql-ink:       var(--c-ink);
  --ql-warm-mid:  var(--c-muted);
  --ql-warm-pale: var(--c-pale);
  --ql-rule:      rgba(26, 26, 26, 0.12);
  --ql-rule-mid:  rgba(26, 26, 26, 0.20);
  --ql-cobalt:    var(--c-oxblood);
  --ql-font:      var(--font-sans);
  --ti-rule:      var(--c-rule);

}
} /* end @layer tokens */