/* ============================================================================
   TOTSNAME DESIGN SYSTEM — TOKENS LAYER (v1.0 · v9.87)
   ----------------------------------------------------------------------------
   This file is the single source of truth for brand values. It captures the
   EXISTING TotsName visual language as named tokens — it changes nothing
   visually. style.css (and every future page) builds on top of it.

   Rules:
   • Never hardcode a brand colour, radius or shadow in new code — use a token.
   • New components use the canonical `tn-*` classes below, or compose tokens.
   • Existing classes keep working untouched; this layer only ADDs vocabulary.
   ========================================================================== */

:root {
  /* ---- Brand colour system (canonicalised from the live site) ---- */
  /* Primary brand pink — the site's main identity colour */
  --tn-rose:        #F0006B;
  --tn-rose-dk:     #D6005E;
  --tn-rose-lt:     #FFE0F0;
  /* Premium crimson — payments, consultant, premium reports accent
     (was hardcoded as #C6153F/#A20E34 across newer features; now tokenised) */
  --crimson:        #C6153F;
  --crimson-dk:     #A20E34;
  --crimson-lt:     #FDF0F4;
  /* Supporting palette (aliases of the existing :root palette) */
  --tn-sunrise:     #FF4D2E;
  --tn-teal:        #00B5AD;
  --tn-gold:        #F59E0B;
  --tn-violet:      #6B21F4;
  --tn-mint:        #00C48C;
  /* Semantic states */
  --tn-success:     #12A150;
  --tn-success-lt:  #E6F7EE;
  --tn-danger:      #D93A3A;
  --tn-danger-lt:   #FDECEC;
  --tn-warn:        #E08B12;
  --tn-warn-lt:     #FEF3E0;

  /* ---- Gradients (the two canonical brand gradients) ---- */
  --grad-rose:      linear-gradient(135deg, var(--tn-rose), #C4005A);
  --grad-crimson:   linear-gradient(135deg, var(--crimson), var(--crimson-dk));

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* ---- Type scale (existing sizes, named) ---- */
  --fs-xs: 12px; --fs-sm: 13.5px; --fs-base: 15px; --fs-md: 16px;
  --fs-lg: 18px; --fs-xl: 22px;
  --fs-h3: clamp(19px, 2.4vw, 24px);
  --fs-h2: clamp(24px, 3.4vw, 32px);
  --fs-h1: clamp(28px, 4.4vw, 42px);

  /* ---- Z-index scale ---- */
  --z-nav: 100; --z-dropdown: 500; --z-overlay: 99990;
  --z-modal: 99995; --z-toast: 99999;
}

/* ============================================================================
   CANONICAL COMPONENTS (tn-*) — for all FUTURE pages.
   Thin, token-driven versions of the site's existing button/card/chip look.
   ========================================================================== */

/* Buttons — one family, three intents */
.tn-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer; text-decoration:none;
  font-family:var(--font-body,sans-serif); font-weight:600; font-size:var(--fs-base);
  padding:12px 24px; border-radius:var(--radius-pill,100px);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.tn-btn:hover{ transform:translateY(-1px); }
.tn-btn[aria-busy="true"], .tn-btn:disabled{ opacity:.65; pointer-events:none; }
.tn-btn-primary{ background:var(--grad-rose); color:#fff; box-shadow:0 10px 26px rgba(240,0,107,.26); }
.tn-btn-premium{ background:var(--grad-crimson); color:#fff; box-shadow:0 10px 26px rgba(198,21,63,.28); }
.tn-btn-outline{ background:var(--white,#fff); color:var(--ink,#0F0820); border:1px solid var(--border-md,rgba(107,33,244,.22)); }
.tn-btn-ghost{ background:transparent; color:var(--ink,#0F0820); border:1px solid transparent; }
.tn-btn-ghost:hover{ border-color:var(--border,rgba(107,33,244,.12)); }

/* Card */
.tn-card{ background:var(--white,#fff); border:1px solid var(--border,rgba(107,33,244,.12));
  border-radius:var(--radius-lg,24px); padding:var(--sp-6);
  box-shadow:var(--shadow, 0 8px 26px rgba(22,11,46,.06)); }

/* Chip (multi-select) */
.tn-chip{ display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--white,#fff); border:1px solid var(--border-md,rgba(107,33,244,.22));
  color:var(--ink,#0F0820); border-radius:var(--radius-pill,100px);
  padding:8px 16px; font-size:var(--fs-sm); transition:all .15s ease; }
.tn-chip.active, .tn-chip[aria-pressed="true"]{
  background:var(--grad-rose); color:#fff; border-color:transparent; }

/* Input */
.tn-input{ width:100%; padding:12px 14px; font-size:var(--fs-base);
  border:1px solid var(--border-md,rgba(107,33,244,.22)); border-radius:var(--radius-sm,10px);
  background:var(--white,#fff); color:var(--ink,#0F0820); }
.tn-input:focus{ outline:2px solid var(--tn-rose); outline-offset:1px; border-color:transparent; }

/* Badge */
.tn-badge{ display:inline-block; padding:3px 12px; border-radius:var(--radius-pill,100px);
  font-size:var(--fs-xs); font-weight:600; }
.tn-badge-success{ background:var(--tn-success-lt); color:var(--tn-success); }
.tn-badge-warn{ background:var(--tn-warn-lt); color:#B7791F; }
.tn-badge-danger{ background:var(--tn-danger-lt); color:var(--tn-danger); }
.tn-badge-premium{ background:var(--crimson-lt); color:var(--crimson); }

/* Section heading block */
.tn-section-head{ text-align:center; max-width:680px; margin:0 auto var(--sp-8); }
.tn-section-head .tn-eyebrow{ font-size:var(--fs-xs); font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--tn-rose); }
.tn-section-head h2{ font-family:var(--font-display,serif); font-size:var(--fs-h2);
  color:var(--ink,#0F0820); margin:6px 0 8px; }
.tn-section-head p{ color:var(--ink-45,#7B6A9E); font-size:var(--fs-md); margin:0; }

/* Accessibility helpers */
.tn-visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; }
.tn-focusable:focus-visible{ outline:3px solid var(--tn-rose); outline-offset:2px; }