/* ==========================================================================
   Publicus Design Tokens
   The single source of truth for colour, typography, spacing, radius,
   shadow, and motion across product, marketing, and brand surfaces.

   Anchored on brand primary #634086.
   Mirrors and extends the variables defined in website-v2/src/app/globals.css.

   Do not edit this file without updating tokens.json in lockstep.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     BRAND PURPLE LADDER
     Calibrated so #634086 lands at the 600 step. Use the named brand
     variables below for semantics; use the numeric scale for one-off needs.
     ---------------------------------------------------------------------- */
  --purple-50:  #F5F0FA;
  --purple-100: #EADFF2;
  --purple-200: #D2BAE3;
  --purple-300: #B091D0;
  --purple-400: #8B66B8;
  --purple-500: #7148A6;
  --purple-600: #634086;  /* BRAND PRIMARY */
  --purple-700: #4F346B;
  --purple-800: #3B2752;
  --purple-900: #2E1E44;
  --purple-950: #1A1028;

  /* ----------------------------------------------------------------------
     NEUTRAL LADDER
     Warm-leaning slate. Anchors all text, borders, and surface fills.
     ---------------------------------------------------------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAFB;
  --neutral-100: #F4F4F6;
  --neutral-200: #E5E5EA;
  --neutral-300: #D1D1D8;
  --neutral-400: #9A9AA3;
  --neutral-500: #6E6E78;
  --neutral-600: #4F4F58;
  --neutral-700: #38383F;
  --neutral-800: #232328;
  --neutral-900: #14141A;
  --neutral-950: #0A0A0E;

  /* ----------------------------------------------------------------------
     SEMANTIC COLOUR ROLES
     Map these in product and marketing code. Never reference raw scale
     values inside components.
     ---------------------------------------------------------------------- */

  /* Brand (mirrors website tokens) */
  --color-brand:           var(--purple-600);
  --color-brand-dark:      var(--purple-700);
  --color-brand-deeper:    var(--purple-900);
  --color-purple-tint:     var(--purple-50);
  --color-purple-surface:  var(--purple-100);

  /* Backgrounds */
  --color-bg-primary:      var(--neutral-50);
  --color-bg-surface:      var(--neutral-100);
  --color-bg-tinted:       var(--purple-50);
  --color-bg-dark:         var(--purple-900);
  --color-bg-deep:         var(--purple-950);

  /* Text */
  --color-text-primary:    var(--neutral-900);
  --color-text-secondary:  var(--neutral-500);
  --color-text-muted:      var(--neutral-400);
  --color-text-inverse:    var(--neutral-0);
  --color-text-brand:      var(--purple-600);

  /* Borders */
  --color-border:          var(--neutral-200);
  --color-border-subtle:   var(--neutral-100);
  --color-border-strong:   var(--neutral-300);
  --color-border-brand:    var(--purple-200);

  /* Semantic status (calibrated to sit calmly next to purple) */
  --color-success:         #2E7D5B;
  --color-success-bg:      #E8F2EC;
  --color-warning:         #B97A1F;
  --color-warning-bg:      #FAF1E2;
  --color-critical:        #B5394D;
  --color-critical-bg:     #F8E6E9;
  --color-info:            var(--purple-600);
  --color-info-bg:         var(--purple-50);

  /* ----------------------------------------------------------------------
     TYPOGRAPHY
     Switzer is the Publicus typeface — it sets the wordmark and every
     display heading, and is the preferred face anywhere display weight
     is needed. Inter stays as the body / UI workhorse for sustained
     reading at small sizes.

     Load Switzer via /brand/fonts/switzer.css before tokens.css.
     ---------------------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Switzer', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-brand: 'Switzer', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (1.25 ratio / Major Third) */
  --text-xs:   0.75rem;    /* 12px - captions, eyebrow labels */
  --text-sm:   0.875rem;   /* 14px - small UI text */
  --text-base: 1rem;       /* 16px - body default */
  --text-lg:   1.125rem;   /* 18px - emphasized body, marketing body */
  --text-xl:   1.25rem;    /* 20px - subhead */
  --text-2xl:  1.5rem;     /* 24px - h4 */
  --text-3xl:  1.875rem;   /* 30px - h3 */
  --text-4xl:  2.25rem;    /* 36px - h2 */
  --text-5xl:  3rem;       /* 48px - h1 */
  --text-6xl:  3.75rem;    /* 60px - display */
  --text-7xl:  4.5rem;     /* 72px - hero display */

  /* Line heights */
  --leading-tight:   1.1;    /* display, very large heads */
  --leading-snug:    1.25;   /* headings */
  --leading-normal:  1.5;    /* body */
  --leading-relaxed: 1.625;  /* long-form copy */

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

  /* Letter spacing */
  --tracking-tight:  -0.02em;   /* display, hero heads */
  --tracking-snug:   -0.01em;   /* large heads */
  --tracking-normal: 0;
  --tracking-wide:   0.06em;    /* eyebrow uppercase, small labels */

  /* ----------------------------------------------------------------------
     RADIUS
     Mirrors DESIGN.md: 16px cards, 20px panels, fully rounded pills.
     ---------------------------------------------------------------------- */
  --radius-sm:    6px;     /* small badges, inline pills */
  --radius-md:    10px;    /* inputs, small controls */
  --radius-lg:    16px;    /* cards, surface-card */
  --radius-xl:    20px;    /* surface-product, larger panels */
  --radius-2xl:   28px;    /* hero panels, marketing surfaces */
  --radius-full:  9999px;  /* CTA pills, surface-pill */

  /* ----------------------------------------------------------------------
     SHADOWS
     Outer (lifted) shadows for elements that sit above the page,
     plus inset (indented / pressed-in) shadows for icon wells,
     inputs, and any element that should read as carved into the surface.
     ---------------------------------------------------------------------- */

  /* Outer shadows — element sits above the surface */
  --shadow-card:     0 1px 2px rgba(20, 20, 26, 0.04),
                     0 1px 3px rgba(20, 20, 26, 0.06);
  --shadow-product:  0 4px 12px -4px rgba(20, 20, 26, 0.08),
                     0 8px 24px -8px rgba(46, 30, 68, 0.12);
  --shadow-button:   0 2px 4px rgba(99, 64, 134, 0.18),
                     0 4px 12px rgba(99, 64, 134, 0.14);
  --shadow-glow:     0 0 0 4px rgba(99, 64, 134, 0.16);
  --shadow-hero:     0 24px 60px -20px rgba(46, 30, 68, 0.28),
                     0 12px 32px -12px rgba(20, 20, 26, 0.18);

  /* Inset shadows — element reads as carved into the surface */
  --shadow-inset-sm:    inset 0 1px 2px rgba(46, 30, 68, 0.06),
                        inset 0 0 0 1px rgba(20, 20, 26, 0.03);
  --shadow-inset-md:    inset 0 2px 4px rgba(46, 30, 68, 0.08),
                        inset 0 0 0 1px rgba(20, 20, 26, 0.04);
  --shadow-inset-lg:    inset 0 4px 8px rgba(46, 30, 68, 0.10),
                        inset 0 0 0 1px rgba(20, 20, 26, 0.05);
  --shadow-inset-well:  inset 0 2px 4px rgba(46, 30, 68, 0.10),
                        inset 0 1px 0 rgba(255, 255, 255, 0.6),
                        inset 0 0 0 1px rgba(99, 64, 134, 0.08);
  --shadow-inset-pressed: inset 0 2px 6px rgba(46, 30, 68, 0.18),
                          inset 0 0 0 1px rgba(46, 30, 68, 0.10);

  /* Soft top-edge highlight — for "glass" surfaces that sit on tinted bg */
  --shadow-highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* ----------------------------------------------------------------------
     SPACING
     4px base unit. Use the scale; avoid arbitrary pixel values.
     ---------------------------------------------------------------------- */
  --space-0:  0;
  --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;
  --space-24: 96px;
  --space-32: 128px;

  /* ----------------------------------------------------------------------
     MOTION
     Short, communicative durations. Anything longer than 400ms should
     reinforce a state (e.g., breathing on a live status badge).
     ---------------------------------------------------------------------- */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-breath: 2500ms;

  --easing-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --easing-emphasized:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --easing-breath:      cubic-bezier(0.4, 0, 0.6, 1);

  /* ----------------------------------------------------------------------
     ELEVATION / Z-INDEX
     ---------------------------------------------------------------------- */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
  --z-tooltip: 600;

  /* ----------------------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------------------- */
  --container-narrow:  680px;
  --container-base:    960px;
  --container-wide:    1200px;
  --container-full:    1400px;
}

/* ==========================================================================
   REUSABLE PRIMITIVES
   Mirrors the website's component recipes. Add to globals.css or
   import this file directly.
   ========================================================================== */

/* ==========================================================================
   ELEVATED SURFACES
   Three signature treatments shared by every Publicus component:
   1. Purple-tinted shadow tones (not gray)
   2. 1px top highlight rim — "polished, lit from above"
   3. Subtle multi-stop gradient backgrounds (not flat fills)
   ========================================================================== */

.surface-card {
  /* Subtle two-stop gradient gives the white surface dimension */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(252, 250, 254, 1) 100%);
  border: 1px solid rgba(46, 30, 68, 0.06);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--shadow-highlight-top),                    /* 1px top highlight */
    var(--shadow-card),                              /* outer ambient */
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);       /* inner rim */
}

.surface-product {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(250, 247, 252, 1) 100%);
  border: 1px solid rgba(46, 30, 68, 0.08);
  border-radius: var(--radius-xl);
  box-shadow:
    var(--shadow-highlight-top),
    var(--shadow-product),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* surface-glass — the top-tier premium card.
   Use for hero metric callouts, key feature blocks, marketing focal points. */
.surface-glass {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(245, 240, 250, 0.62) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-xl);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),         /* sharp top highlight */
    inset 0 0 0 1px rgba(99, 64, 134, 0.06),        /* purple inner rim */
    0 1px 2px rgba(46, 30, 68, 0.04),
    0 12px 32px -8px rgba(46, 30, 68, 0.18),
    0 24px 48px -16px rgba(46, 30, 68, 0.12);
}
.surface-glass.on-dark {
  background: linear-gradient(180deg,
    rgba(75, 50, 110, 0.55) 0%,
    rgba(46, 30, 68, 0.45) 100%);
  border: 1px solid rgba(208, 186, 227, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(208, 186, 227, 0.10),
    0 24px 48px -16px rgba(0, 0, 0, 0.4);
}

.surface-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 12px 5px 10px;
  border-radius: var(--radius-full);
  /* Multi-stop gradient gives the pill internal dimension */
  background: linear-gradient(180deg,
    rgba(234, 223, 242, 0.95) 0%,
    rgba(220, 200, 235, 0.80) 100%);
  color: var(--color-brand-dark);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  /* Layered shadow: top highlight rim + soft purple inner border + tiny outer lift */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(99, 64, 134, 0.10),
    inset 0 0 0 0.5px rgba(99, 64, 134, 0.16),
    0 1px 2px rgba(46, 30, 68, 0.06);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Inset / indented surfaces — for icon wells, input fields, "carved" elements */
.surface-inset {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-inset-md);
  border: 1px solid transparent;
}

.surface-well {
  background: var(--color-bg-tinted);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset-well);
}

.icon-well {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset-md);
  width: 44px;
  height: 44px;
  color: var(--color-brand);
}
.icon-well.brand {
  background: var(--color-purple-tint);
  box-shadow: var(--shadow-inset-well);
}

/* ==========================================================================
   CTAs — sculpted, not flat.

   Primary uses a vertical purple-ladder gradient with a sharp top highlight
   and a soft purple glow at rest, deepening on hover. Secondary uses a
   frosted-glass treatment so it reads as the same family rather than a
   generic outlined button.
   ========================================================================== */

.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 26px;
  border-radius: var(--radius-full);
  /* Vertical gradient down the purple ladder gives the button dimension */
  background: linear-gradient(180deg,
    var(--purple-500) 0%,
    var(--purple-600) 50%,
    var(--purple-700) 100%);
  color: var(--color-text-inverse);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.005em;
  border: none;
  cursor: pointer;
  position: relative;
  text-shadow: 0 1px 0 rgba(46, 30, 68, 0.25);
  /* Layered shadow: sharp top highlight + soft purple glow + carved bottom edge */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),       /* sharp top highlight */
    inset 0 -1px 0 rgba(46, 30, 68, 0.30),         /* carved bottom edge */
    0 1px 2px rgba(46, 30, 68, 0.10),
    0 4px 12px -2px rgba(99, 64, 134, 0.28),
    0 8px 24px -8px rgba(99, 64, 134, 0.20);
  transition:
    transform var(--duration-fast) var(--easing-emphasized),
    box-shadow var(--duration-base) var(--easing-emphasized),
    background var(--duration-base) var(--easing-standard);
}
.cta-primary:hover {
  background: linear-gradient(180deg,
    var(--purple-600) 0%,
    var(--purple-700) 50%,
    var(--purple-800) 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(46, 30, 68, 0.40),
    0 2px 4px rgba(46, 30, 68, 0.14),
    0 8px 20px -2px rgba(99, 64, 134, 0.40),
    0 16px 32px -8px rgba(99, 64, 134, 0.28);
}
.cta-primary:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(46, 30, 68, 0.50),
    inset 0 2px 6px rgba(46, 30, 68, 0.30),
    0 1px 2px rgba(46, 30, 68, 0.10);
}

.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 26px;
  border-radius: var(--radius-full);
  /* Frosted glass — reads as the same family as primary, not generic outline */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 244, 252, 0.85) 100%);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  color: var(--color-brand-dark);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.005em;
  border: 1px solid rgba(99, 64, 134, 0.18);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),       /* sharp top highlight */
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 1px 2px rgba(46, 30, 68, 0.04),
    0 4px 12px -4px rgba(46, 30, 68, 0.08);
  transition:
    transform var(--duration-fast) var(--easing-emphasized),
    box-shadow var(--duration-base) var(--easing-emphasized),
    border-color var(--duration-base) var(--easing-standard);
}
.cta-secondary:hover {
  border-color: rgba(99, 64, 134, 0.30);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 2px 4px rgba(46, 30, 68, 0.06),
    0 8px 20px -4px rgba(46, 30, 68, 0.12);
}

.copy-balance {
  text-wrap: balance;
}

.heading-display {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brand);
}

/* ==========================================================================
   SECTION MOODS
   The three legal section moods from DESIGN.md.
   ========================================================================== */

.section-light {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.section-tinted {
  background: var(--color-bg-tinted);
  color: var(--color-text-primary);
}

.section-dark {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}
.section-dark .eyebrow { color: var(--purple-200); }
.section-dark a { color: var(--purple-200); }

/* ==========================================================================
   BRAND TEXTURE
   Diamond pattern as a backdrop. Use sparingly; keep opacity low.
   Reference the SVG file from /brand/patterns/.
   ========================================================================== */

.bg-pattern-diamond {
  background-image: url('./assets/patterns/publicus_pattern_diamond.svg');
  background-repeat: repeat;
  background-size: 240px auto;
}

.bg-pattern-diamond-tint {
  background-color: var(--color-bg-tinted);
  background-image: url('./assets/patterns/publicus_pattern_diamond_purple-tint.svg');
  background-repeat: repeat;
  background-size: 240px auto;
}

.bg-pattern-diamond-deep {
  background-color: var(--color-bg-dark);
  background-image: url('./assets/patterns/publicus_pattern_diamond_deep.svg');
  background-repeat: repeat;
  background-size: 240px auto;
}