/* ── typography.css ── */
/* Publrr Typography Tokens */

/* Google Fonts: Playfair Display (editorial) + Inter (UI) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Font Families ───────────────────────────────────────── */
  --font-display:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-ui:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Font Weights ────────────────────────────────────────── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* ── Font Sizes (base 16px) ──────────────────────────────── */
  --text-xs:    12px;  /* Caption / Label */
  --text-sm:    14px;  /* Navigation / Small UI */
  --text-base:  16px;  /* Body Default */
  --text-lg:    18px;  /* Body Large */
  --text-xl:    20px;  /* Lead */
  --text-2xl:   24px;  /* H4 */
  --text-3xl:   28px;  /* H3 Subhead */
  --text-4xl:   36px;  /* H3 Large */
  --text-5xl:   40px;  /* H2 Section */
  --text-6xl:   48px;  /* H2 Large */
  --text-7xl:   56px;  /* H1 */
  --text-8xl:   72px;  /* H1 Hero */
  --text-9xl:   80px;  /* Display */

  /* ── Line Heights ────────────────────────────────────────── */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ── Letter Spacing ──────────────────────────────────────── */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.05em;
  --tracking-widest: 0.1em;

  /* ── Semantic Type Roles ─────────────────────────────────── */
  /* H1 / Hero — Playfair Display Bold 72/80px -1% */
  --type-h1-family:     var(--font-display);
  --type-h1-weight:     var(--weight-bold);
  --type-h1-size:       var(--text-8xl);
  --type-h1-line:       var(--leading-tight);
  --type-h1-tracking:   var(--tracking-tight);

  /* H2 / Section — Playfair Display SemiBold 40/48px 0% */
  --type-h2-family:     var(--font-display);
  --type-h2-weight:     var(--weight-semibold);
  --type-h2-size:       var(--text-5xl);
  --type-h2-line:       1.2;
  --type-h2-tracking:   var(--tracking-normal);

  /* H3 / Subhead — Playfair Display Medium 28/36px 0% */
  --type-h3-family:     var(--font-display);
  --type-h3-weight:     var(--weight-medium);
  --type-h3-size:       var(--text-3xl);
  --type-h3-line:       1.285;
  --type-h3-tracking:   var(--tracking-normal);

  /* Body Large — Inter Regular 18/28px */
  --type-body-lg-family:   var(--font-ui);
  --type-body-lg-weight:   var(--weight-regular);
  --type-body-lg-size:     var(--text-lg);
  --type-body-lg-line:     1.555;

  /* Body Default — Inter Regular 16/24px */
  --type-body-family:   var(--font-ui);
  --type-body-weight:   var(--weight-regular);
  --type-body-size:     var(--text-base);
  --type-body-line:     1.5;

  /* Button — Inter SemiBold 16/20px */
  --type-btn-family:    var(--font-ui);
  --type-btn-weight:    var(--weight-semibold);
  --type-btn-size:      var(--text-base);
  --type-btn-line:      1.25;

  /* Navigation — Inter Medium 14/20px */
  --type-nav-family:    var(--font-ui);
  --type-nav-weight:    var(--weight-medium);
  --type-nav-size:      var(--text-sm);
  --type-nav-line:      1.428;

  /* Caption / Label — Inter Regular 12/16px */
  --type-caption-family:  var(--font-ui);
  --type-caption-weight:  var(--weight-regular);
  --type-caption-size:    var(--text-xs);
  --type-caption-line:    1.333;

  /* Eyebrow / Overline — Inter SemiBold 11px, wide tracking */
  --type-eyebrow-family:   var(--font-ui);
  --type-eyebrow-weight:   var(--weight-semibold);
  --type-eyebrow-size:     11px;
  --type-eyebrow-tracking: var(--tracking-widest);
  --type-eyebrow-transform: uppercase;
}

/* ── colors.css ── */
/* Publrr Color Tokens */

:root {
  /* ── Primary Palette ─────────────────────────────────────── */
  --color-primary:        #6D28D9;  /* Brand primary purple */
  --color-primary-deep:   #3B0A73;  /* Depth & emphasis */
  --color-primary-light:  #7C3AED;  /* Slightly lighter primary */
  --color-electric:       #8B5CF6;  /* CTAs & highlights / Electric Glow */
  --color-ink:            #090616;  /* Text & strong contrast / Dark Ink */
  --color-soft-lilac:     #F3EDFF;  /* Subtle backgrounds */
  --color-white:          #FFFFFF;  /* Clean backgrounds */
  --color-gold:           #C9A24E;  /* Premium accent */

  /* ── Primary Opacity Scale ───────────────────────────────── */
  --color-primary-5:      rgba(109, 40, 217, 0.05);
  --color-primary-10:     rgba(109, 40, 217, 0.10);
  --color-primary-15:     rgba(109, 40, 217, 0.15);
  --color-primary-20:     rgba(109, 40, 217, 0.20);
  --color-primary-30:     rgba(109, 40, 217, 0.30);

  /* ── Neutrals ────────────────────────────────────────────── */
  --color-neutral-50:     #F9FAFB;
  --color-neutral-100:    #F3F4F6;
  --color-neutral-200:    #E5E7EB;
  --color-neutral-300:    #D1D5DB;
  --color-neutral-400:    #9CA3AF;
  --color-neutral-500:    #6B7280;
  --color-neutral-600:    #4B5563;
  --color-neutral-700:    #374151;
  --color-neutral-800:    #1F2937;
  --color-neutral-900:    #111827;

  /* ── Status ──────────────────────────────────────────────── */
  --color-success:        #059669;
  --color-success-bg:     #D1FAE5;
  --color-success-text:   #065F46;
  --color-warning:        #D97706;
  --color-warning-bg:     #FEF3C7;
  --color-warning-text:   #92400E;
  --color-error:          #DC2626;
  --color-error-bg:       #FEE2E2;
  --color-error-text:     #991B1B;
  --color-info:           var(--color-primary);
  --color-info-bg:        var(--color-primary-10);

  /* ── Semantic Aliases ────────────────────────────────────── */
  /* Surfaces */
  --surface-default:      var(--color-white);
  --surface-subtle:       var(--color-soft-lilac);
  --surface-dark:         var(--color-ink);
  --surface-dark-2:       #0F0824;
  --surface-brand:        var(--color-primary);
  --surface-card:         var(--color-white);
  --surface-card-dark:    #110A2B;

  /* Text */
  --text-primary:         var(--color-ink);
  --text-secondary:       var(--color-neutral-600);
  --text-muted:           var(--color-neutral-400);
  --text-inverse:         var(--color-white);
  --text-brand:           var(--color-primary);
  --text-link:            var(--color-primary);

  /* Borders */
  --border-default:       var(--color-neutral-200);
  --border-subtle:        var(--color-soft-lilac);
  --border-brand:         var(--color-primary);
  --border-dark:          rgba(255,255,255,0.10);

  /* Interactive */
  --interactive:          var(--color-primary);
  --interactive-hover:    #5B21B6;
  --interactive-glow:     var(--color-electric);
  --interactive-pressed:  var(--color-primary-deep);

  /* ── Gradients ───────────────────────────────────────────── */
  --gradient-brand:       linear-gradient(135deg, #F3EDFF 0%, #6D28D9 100%); /* @kind color */
  --gradient-brand-vert:  linear-gradient(180deg, #F3EDFF 0%, #6D28D9 100%); /* @kind color */
  --gradient-hero:        linear-gradient(160deg, #090616 0%, #1A0838 60%, #0F0520 100%); /* @kind color */
  --gradient-purple-glow: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(109,40,217,0.45) 0%, transparent 70%); /* @kind color */
  --gradient-card-shine:  linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%); /* @kind color */
  --gradient-gold:        linear-gradient(135deg, #C9A24E 0%, #E8C677 50%, #C9A24E 100%); /* @kind color */
}

/* ── spacing.css ── */
/* Publrr Spacing & Layout Tokens */

:root {
  /* ── Base Spacing Scale (4px base) ───────────────────────── */
  --space-0:    0px;
  --space-px:   1px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --space-2:    8px;
  --space-2-5:  10px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-9:    36px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-28:   112px;
  --space-32:   128px;
  --space-40:   160px;
  --space-48:   192px;
  --space-64:   256px;

  /* ── Semantic Spacing ────────────────────────────────────── */
  --spacing-xs:   var(--space-1);   /*  4px */
  --spacing-sm:   var(--space-2);   /*  8px */
  --spacing-md:   var(--space-4);   /* 16px */
  --spacing-lg:   var(--space-6);   /* 24px */
  --spacing-xl:   var(--space-8);   /* 32px */
  --spacing-2xl:  var(--space-12);  /* 48px */
  --spacing-3xl:  var(--space-16);  /* 64px */
  --spacing-4xl:  var(--space-24);  /* 96px */
  --spacing-5xl:  var(--space-32);  /* 128px */

  /* ── Section Padding ─────────────────────────────────────── */
  --section-py:   var(--space-20);  /* 80px vertical padding */
  --section-px:   var(--space-8);   /* 32px horizontal padding */

  /* ── Container ───────────────────────────────────────────── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;
  --container-px:   var(--space-6);  /* 24px side gutter */

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-none:  0px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-3xl:   24px;
  --radius-full:  9999px;

  /* Semantic radius */
  --radius-btn:   var(--radius-md);
  --radius-input: var(--radius-md);
  --radius-card:  var(--radius-xl);
  --radius-badge: var(--radius-full);
  --radius-chip:  var(--radius-full);
  --radius-tag:   var(--radius-sm);
  --radius-modal: var(--radius-2xl);
  --radius-avatar: var(--radius-full);

  /* ── Z-Index Scale ───────────────────────────────────────── */
  --z-base:     0; /* @kind other */
  --z-raised:   1; /* @kind other */
  --z-overlay:  10; /* @kind other */
  --z-modal:    100; /* @kind other */
  --z-toast:    200; /* @kind other */
  --z-tooltip:  300; /* @kind other */
}

/* ── shadows.css ── */
/* Publrr Shadow Tokens */

:root {
  /* ── Elevation Shadows ───────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(9, 6, 22, 0.06);
  --shadow-sm:   0 2px 4px rgba(9, 6, 22, 0.08), 0 1px 2px rgba(9, 6, 22, 0.04);
  --shadow-md:   0 4px 12px rgba(9, 6, 22, 0.10), 0 2px 4px rgba(9, 6, 22, 0.06);
  --shadow-lg:   0 8px 24px rgba(9, 6, 22, 0.12), 0 4px 8px rgba(9, 6, 22, 0.06);
  --shadow-xl:   0 16px 48px rgba(9, 6, 22, 0.16), 0 8px 16px rgba(9, 6, 22, 0.08);
  --shadow-2xl:  0 24px 64px rgba(9, 6, 22, 0.20), 0 12px 24px rgba(9, 6, 22, 0.10);

  /* ── Brand / Purple Shadows ──────────────────────────────── */
  --shadow-brand:      0 4px 20px rgba(109, 40, 217, 0.25);
  --shadow-brand-lg:   0 8px 40px rgba(109, 40, 217, 0.35);
  --shadow-electric:   0 4px 20px rgba(139, 92, 246, 0.40);
  --shadow-electric-lg:0 8px 40px rgba(139, 92, 246, 0.50);

  /* ── Card Shadows ────────────────────────────────────────── */
  --shadow-card:       0 2px 8px rgba(9, 6, 22, 0.08), 0 1px 3px rgba(9, 6, 22, 0.04);
  --shadow-card-hover: 0 8px 24px rgba(9, 6, 22, 0.12), 0 4px 8px rgba(9, 6, 22, 0.06);
  --shadow-card-brand: 0 4px 16px rgba(109, 40, 217, 0.15), 0 1px 3px rgba(9, 6, 22, 0.04);

  /* ── Dark Surface Shadows (on dark bg) ───────────────────── */
  --shadow-dark-card:  0 2px 12px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
  --shadow-dark-glow:  0 0 40px rgba(109, 40, 217, 0.30), 0 0 80px rgba(109, 40, 217, 0.15);

  /* ── Button Shadows ──────────────────────────────────────── */
  --shadow-btn:         0 2px 6px rgba(109, 40, 217, 0.30);
  --shadow-btn-hover:   0 4px 12px rgba(109, 40, 217, 0.40);
  --shadow-btn-pressed: inset 0 1px 3px rgba(0,0,0,0.20);

  /* ── Inner / Inset ───────────────────────────────────────── */
  --shadow-inset:       inset 0 1px 2px rgba(9, 6, 22, 0.08);
  --shadow-inset-brand: inset 0 0 0 2px var(--color-primary);

  /* ── Glass / Frosted Surfaces ────────────────────────────── */
  --glass-bg:           rgba(255, 255, 255, 0.06); /* @kind color */
  --glass-border:       rgba(255, 255, 255, 0.10); /* @kind color */
  --glass-blur:         blur(12px); /* @kind other */
  --glass-bg-light:     rgba(255, 255, 255, 0.70); /* @kind color */
  --glass-blur-light:   blur(16px); /* @kind other */
}

/* ── base.css ── */
/* Publrr Base Reset & Global Styles */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

h1 {
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  letter-spacing: var(--type-h1-tracking);
  line-height: var(--type-h1-line);
}

h2 {
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-line);
}

h3 {
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-line);
}

h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

p {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

a:hover {
  opacity: 0.8;
}

/* ── Eyebrow Label ──────────────────────────────────────────── */
.eyebrow {
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: var(--type-eyebrow-transform);
  color: var(--color-primary);
}

/* ── Utility: Gradient Text ─────────────────────────────────── */
.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Container ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* ── Focus Ring ─────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Selection ──────────────────────────────────────────────── */
::selection {
  background: var(--color-primary-20);
  color: var(--color-primary-deep);
}