/* tokens/fonts.css */
/* Pirone Entertainment — Webfonts
   Display: Cormorant Garamond (elegant, wedding-classic serif)
   Body/UI: Manrope (clean, modern, energetic sans)
   NOTE: Loaded from Google Fonts CDN. Swap to self-hosted binaries for production. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=Manrope:wght@400;500;600;700;800&display=swap');


/* tokens/colors.css */
/* ============================================================
   COLORS — Pirone Entertainment
   Brand color from pironedjs.com: indigo #4C6AEF.
   A clean, sleek black + blue system — high energy, professional.
   Base scales first, then semantic aliases.
   ============================================================ */
:root {
  /* --- Indigo (primary brand + CTA) — from the site theme color --- */
  --indigo-700: #2C3CAE;   /* active */
  --indigo-600: #3A4DD6;   /* hover */
  --indigo-500: #4C6AEF;   /* PRIMARY brand / CTA */
  --indigo-400: #6E86F4;
  --indigo-300: #A3B2F8;   /* accent on dark */
  --indigo-200: #C8D1FB;
  --indigo-100: #E8ECFE;

  /* --- Azure (secondary energy accent — brighter, lighter blue) --- */
  --azure-600: #1E74D0;
  --azure-500: #2E8BE6;
  --azure-400: #5CA8F0;
  --azure-300: #9BC8F7;    /* light accent on dark */
  --azure-100: #DEEEFC;

  /* --- Navy / near-black (the grounded dark base, like the logo) --- */
  --navy-950: #070910;
  --navy-900: #0C1019;
  --navy-800: #121826;     /* primary dark surface */
  --navy-700: #1C2436;
  --navy-600: #29344A;
  --navy-400: #7A88A4;     /* muted text on dark */
  --navy-200: #C0C9DA;

  /* --- Ink (text on light) --- */
  --ink-900: #0E1116;
  --ink-800: #1A1F29;
  --ink-700: #333B49;

  /* --- Paper (clean cool-neutral light surfaces) --- */
  --paper-0:   #FFFFFF;
  --paper-50:  #F4F6FB;    /* page canvas */
  --paper-100: #E9EDF6;    /* subtle fill / hover */
  --paper-200: #D8DFEC;    /* hairline on light */

  /* --- Slate / fog (neutral grays) --- */
  --fog-400:   #BEC7D8;    /* muted line / disabled */
  --slate-500: #6A7488;    /* subtle text */
  --slate-600: #4D586B;    /* secondary text */

  /* --- Pure --- */
  --white: #FFFFFF;
  --black: #000000;

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */
  /* Surfaces */
  --surface-page:      var(--paper-50);
  --surface-card:      var(--paper-0);
  --surface-raised:    var(--white);
  --surface-sunken:    var(--paper-100);
  --surface-inverse:   var(--navy-800);   /* dark sections */
  --surface-inverse-2: var(--navy-900);
  --surface-accent:    var(--indigo-500);

  /* Text on light */
  --text-heading:   var(--ink-900);
  --text-body:      var(--ink-800);
  --text-muted:     var(--slate-600);
  --text-subtle:    var(--slate-500);
  --text-on-accent: var(--white);

  /* Text on dark (navy) */
  --text-heading-inv: var(--paper-50);
  --text-body-inv:    #C4CCDA;
  --text-muted-inv:   var(--navy-400);

  /* Brand roles */
  --brand-base:      var(--navy-800);    /* the grounded black-blue */
  --brand-accent:    var(--indigo-500);  /* primary blue */
  --brand-secondary: var(--azure-500);   /* secondary energy accent */
  --brand-blue:      var(--indigo-500);  /* the logo blue, normalized */

  /* Lines / borders */
  --border-hairline: var(--paper-200);
  --border-strong:   var(--fog-400);
  --border-on-dark:  rgba(255,255,255,0.14);
  --border-accent:   var(--indigo-400);

  /* Interactive */
  --cta-bg:        var(--indigo-500);
  --cta-bg-hover:  var(--indigo-600);
  --cta-bg-active: var(--indigo-700);
  --cta-text:      var(--white);

  /* Stars / rating */
  --star: var(--indigo-500);

  /* Focus */
  --focus-ring: var(--indigo-500);
}


/* tokens/typography.css */
/* ============================================================
   TYPOGRAPHY — Pirone Entertainment
   Display serif (Cormorant Garamond) for classy headlines.
   Sans (Manrope) for energetic, readable body + UI.
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    var(--font-sans);

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* Display scale (serif) — big, classy, high-contrast */
  --fs-display-2xl: clamp(3.5rem, 7vw, 6rem);      /* @kind font */
  --fs-display-xl:  clamp(2.75rem, 5vw, 4.25rem);  /* @kind font */
  --fs-display-lg:  clamp(2.25rem, 3.6vw, 3.25rem); /* @kind font */
  --fs-display-md:  clamp(1.75rem, 2.6vw, 2.25rem); /* @kind font */
  --fs-display-sm:  1.5rem; /* @kind font */

  /* Body / UI scale (sans) */
  --fs-xl:   1.375rem;   /* @kind font */
  --fs-lg:   1.125rem; /* @kind font */
  --fs-base: 1rem; /* @kind font */
  --fs-sm:   0.875rem; /* @kind font */
  --fs-xs:   0.75rem; /* @kind font */

  /* Eyebrow / label (sans, uppercase, tracked) */
  --fs-eyebrow: 0.8125rem; /* @kind font */

  /* Line heights */
  --lh-display: 1.02; /* @kind font */
  --lh-tight:   1.15; /* @kind font */
  --lh-snug:    1.3; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing */
  --ls-display:  -0.015em; /* @kind font */
  --ls-tight:    -0.01em; /* @kind font */
  --ls-normal:   0; /* @kind font */
  --ls-eyebrow:  0.18em;   /* @kind font */
  --ls-caps:     0.06em; /* @kind font */
}

/* ---- Utility text roles (optional; components can use vars directly) ---- */
.pe-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-secondary);
}
.pe-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-heading);
}
.pe-display em, .pe-display i {
  font-style: italic;
  color: var(--brand-accent);
}


/* tokens/spacing.css */
/* ============================================================
   SPACING — Pirone Entertainment (4px base grid)
   ============================================================ */
:root {
  --space-0:   0;
  --space-1:   0.25rem;   /* 4 */
  --space-2:   0.5rem;    /* 8 */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.5rem;    /* 24 */
  --space-6:   2rem;      /* 32 */
  --space-7:   2.5rem;    /* 40 */
  --space-8:   3rem;      /* 48 */
  --space-9:   4rem;      /* 64 */
  --space-10:  5rem;      /* 80 */
  --space-12:  6rem;      /* 96 */
  --space-16:  8rem;      /* 128 */

  /* Section rhythm */
  --section-y:        var(--space-12);
  --section-y-tight:  var(--space-9);

  /* Content widths */
  --container:      1200px;
  --container-wide: 1360px;
  --measure:        66ch;   /* readable prose width */
  --gutter:         clamp(1.25rem, 5vw, 4rem); /* @kind spacing */
}


/* tokens/radii.css */
/* ============================================================
   RADII & SHADOWS — Pirone Entertainment
   Elegant, restrained. Soft warm shadows, not hard/gray.
   ============================================================ */
:root {
  /* Corner radii — gentle, not pill-heavy. CTAs are fully rounded. */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* Warm-tinted shadows (green/brown cast, never cold gray) */
  --shadow-xs:  0 1px 2px rgba(32, 27, 21, 0.06);
  --shadow-sm:  0 2px 6px rgba(32, 27, 21, 0.07);
  --shadow-md:  0 8px 22px rgba(32, 27, 21, 0.10);
  --shadow-lg:  0 18px 44px rgba(32, 27, 21, 0.13);
  --shadow-xl:  0 30px 70px rgba(9, 12, 20, 0.22);

  /* Accent glow — used only on the primary CTA (a touch of energy) */
  --shadow-cta:       0 10px 24px rgba(76, 106, 239, 0.30);
  --shadow-cta-hover: 0 14px 32px rgba(76, 106, 239, 0.40);

  /* Inset for inputs */
  --shadow-inset: inset 0 1px 2px rgba(32, 27, 21, 0.08);
}


/* tokens/motion.css */
/* ============================================================
   MOTION — Pirone Entertainment
   Elegant + alive: confident fades and gentle lifts.
   No bounces, no rave flicker. Warm, unhurried easing.
   ============================================================ */
:root {
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   380ms; /* @kind other */
  --dur-slower: 640ms; /* @kind other */

  /* Easings */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-soft:   cubic-bezier(0.33, 0, 0, 1);       /* @kind other */

  /* Standard interactive transition */
  --transition-base:  all var(--dur-base) var(--ease-out); /* @kind other */
  --transition-color: color var(--dur-fast) var(--ease-out),
                      background-color var(--dur-fast) var(--ease-out),
                      border-color var(--dur-fast) var(--ease-out); /* @kind other */

  /* Hover lift */
  --lift-hover:  translateY(-3px); /* @kind other */
  --press-scale: scale(0.985); /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
    --dur-slower: 0ms; /* @kind other */
    --lift-hover: none; /* @kind other */
    --press-scale: none; /* @kind other */
  }
}


/* styles.css */
/* ============================================================
   Pirone Entertainment — Design System entry point
   Consumers link THIS file. Import order matters.
   ============================================================ */