/* Ohana Entertainment Design System — inlined for production */

/* === fonts.css === */
/* ============================================================
   Ohana Entertainment — Webfonts
   Nearest Google Fonts matches to the brand lettering.
   - Pacifico  → the flowing "Ohana" brush-script wordmark
   - Anton     → the heavy condensed "ENTERTAINMENT" display caps
   - Poppins   → friendly geometric body/UI face (comforting + pro)
   See readme.md "Visual Foundations" for the substitution flag.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Anton&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');


/* === colors.css === */
/* ============================================================
   Ohana Entertainment — Color Tokens
   Pulled directly from the brand mark + tropical event imagery.
   Core trio: Royal Purple, Crimson, Sunset Orange.
   Tropical accents: Lagoon Teal, Hibiscus Pink, Palm Green, Sand.
   ============================================================ */

:root {
  /* ---- Core brand ramps ---- */

  /* Royal Purple — the ring, wheelchair-turntable, primary brand */
  --purple-900: #1f0033;
  --purple-800: #2c0149;
  --purple-700: #410269; /* BRAND PRIMARY (sampled from logo) */
  --purple-600: #57128a;
  --purple-500: #6c28a3;
  --purple-400: #8c52bd;
  --purple-300: #b288d6;
  --purple-200: #d6bce9;
  --purple-100: #ece1f5;
  --purple-050: #f6f0fb;

  /* Crimson — the mohawk + bowtie shades, energy & love */
  --crimson-900: #6e0119;
  --crimson-700: #b00329;
  --crimson-600: #d00531;
  --crimson-500: #e50736; /* sampled from logo */
  --crimson-400: #f0436a;
  --crimson-300: #f87f9b;
  --crimson-200: #fcbccd;
  --crimson-100: #fde3ea;

  /* Sunset Orange — the flame + beard, warmth & fun */
  --orange-700: #b84e00;
  --orange-600: #d96000;
  --orange-500: #f57200; /* sampled from logo */
  --orange-400: #ff8c2b;
  --orange-300: #ffab5e;
  --orange-200: #ffce9c;
  --orange-100: #ffe9d4;

  /* ---- Tropical accents (from event imagery) ---- */

  /* Lagoon Teal — turntable glow, cool stage wash */
  --teal-700: #0a6b73;
  --teal-500: #12a3ad;
  --teal-400: #2bc4cf;
  --teal-300: #7fdde4;
  --teal-100: #d6f5f7;

  /* Hibiscus Pink — wedding florals, soft celebration */
  --pink-600: #d61f7a;
  --pink-500: #f042a0;
  --pink-300: #fa8fc4;
  --pink-100: #fde0ef;

  /* Palm Green — foliage, lei greenery */
  --green-600: #2f8f3e;
  --green-500: #43b054;
  --green-300: #8fd99a;
  --green-100: #e1f5e4;

  /* Sun Gold — uplighting, warm spotlight */
  --gold-500: #f5b800;
  --gold-300: #ffd866;

  /* ---- Neutrals (warm-leaning charcoal) ---- */
  --ink-900: #14101a; /* near-black, warm purple-tinted */
  --ink-800: #241d30;
  --ink-700: #3a3047;
  --ink-600: #564b65;
  --ink-500: #756a84;
  --ink-400: #9a90a8;
  --ink-300: #c4bccf;
  --ink-200: #e3dde9;
  --ink-150: #ece8f1;
  --ink-100: #f4f1f8;
  --ink-050: #faf8fc;
  --white: #ffffff;
  --black: #000000;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Brand */
  --brand-primary: var(--purple-700);
  --brand-primary-hover: var(--purple-600);
  --brand-primary-press: var(--purple-800);
  --brand-secondary: var(--crimson-500);
  --brand-secondary-hover: var(--crimson-600);
  --brand-accent: var(--orange-500);
  --brand-accent-hover: var(--orange-600);

  /* Text */
  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-on-brand: var(--white);
  --text-link: var(--purple-600);
  --text-link-hover: var(--purple-700);

  /* Surfaces */
  --surface-page: var(--ink-050);
  --surface-card: var(--white);
  --surface-sunken: var(--ink-100);
  --surface-inverse: var(--purple-900);
  --surface-brand-tint: var(--purple-050);
  --surface-warm-tint: var(--orange-100);

  /* Borders */
  --border-subtle: var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong: var(--ink-400);
  --border-brand: var(--purple-300);

  /* Feedback */
  --success: var(--green-600);
  --success-tint: var(--green-100);
  --warning: var(--orange-500);
  --warning-tint: var(--orange-100);
  --danger: var(--crimson-600);
  --danger-tint: var(--crimson-100);
  --info: var(--teal-500);
  --info-tint: var(--teal-100);

  /* Focus ring */
  --focus-ring: var(--orange-400);

  /* Signature tropical gradient — sunrise over the islands */
  --gradient-sunset: linear-gradient(120deg, var(--purple-700) 0%, var(--crimson-500) 52%, var(--orange-500) 100%);
  --gradient-lagoon: linear-gradient(135deg, var(--purple-700) 0%, var(--teal-500) 100%);
  --gradient-night: linear-gradient(160deg, var(--purple-900) 0%, var(--purple-700) 100%);
}


/* === typography.css === */
/* ============================================================
   Ohana Entertainment — Typography Tokens
   Pacifico (script accents) · Anton (display caps) · Poppins (UI/body)
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-script: 'Pacifico', 'Brush Script MT', cursive;
  --font-display: 'Anton', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Weights (Poppins) ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ---- Type scale (1.250 major-third, rem) ---- */
  --text-2xs: 0.6875rem;  /* 11px - micro labels */
  --text-xs:  0.75rem;    /* 12px - captions */
  --text-sm:  0.875rem;   /* 14px - secondary UI */
  --text-base:1rem;       /* 16px - body */
  --text-md:  1.125rem;   /* 18px - lead body */
  --text-lg:  1.375rem;   /* 22px - sub-headings */
  --text-xl:  1.75rem;    /* 28px - card titles */
  --text-2xl: 2.25rem;    /* 36px - section heads */
  --text-3xl: 3rem;       /* 48px - page titles */
  --text-4xl: 4rem;       /* 64px - hero */
  --text-5xl: 5.5rem;     /* 88px - display hero */

  /* ---- Line heights ---- */
  --leading-tight: 1.05;   /* display caps */
  --leading-snug: 1.2;     /* headings */
  --leading-normal: 1.5;   /* body */
  --leading-relaxed: 1.65; /* long-form */

  /* ---- Letter spacing ---- */
  --tracking-display: 0.01em;  /* Anton wants near-zero */
  --tracking-caps: 0.08em;     /* small uppercase labels */
  --tracking-wide: 0.16em;     /* overlines */
  --tracking-normal: 0;

  /* ---- Semantic roles ---- */
  --role-hero-font: var(--font-display);
  --role-heading-font: var(--font-display);
  --role-script-font: var(--font-script);
  --role-body-font: var(--font-body);
}


/* === spacing.css === */
/* ============================================================
   Ohana Entertainment — Spacing & Layout Tokens
   8px base rhythm with a couple of half-steps.
   ============================================================ */

: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: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* Container widths */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;
  --gutter: var(--space-5);

  /* ---- Corner radii — soft & friendly, never hard-edged ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;   /* default card */
  --radius-lg: 24px;   /* feature panels */
  --radius-xl: 32px;
  --radius-pill: 999px; /* buttons, chips, badges */
  --radius-circle: 50%;

  /* Border widths */
  --border-thin: 1px;
  --border-med: 2px;
  --border-thick: 3px; /* logo-style confident outlines */
}


/* === effects.css === */
/* ============================================================
   Ohana Entertainment — Effects: shadows, blur, motion
   Shadows are warm (purple-tinted), soft, and lifted —
   matching the comforting, celebratory brand mood.
   ============================================================ */

:root {
  /* ---- Elevation (warm purple-tinted shadows) ---- */
  --shadow-xs: 0 1px 2px rgba(31, 0, 51, 0.08);
  --shadow-sm: 0 2px 6px rgba(31, 0, 51, 0.10);
  --shadow-md: 0 8px 24px rgba(31, 0, 51, 0.12);
  --shadow-lg: 0 16px 44px rgba(31, 0, 51, 0.16);
  --shadow-xl: 0 28px 70px rgba(31, 0, 51, 0.22);

  /* Colored glows — for hero CTAs and lit moments */
  --glow-purple: 0 10px 30px rgba(65, 2, 105, 0.35);
  --glow-orange: 0 10px 30px rgba(245, 114, 0, 0.40);
  --glow-crimson: 0 10px 30px rgba(229, 7, 54, 0.38);
  --glow-teal: 0 10px 30px rgba(18, 163, 173, 0.35);

  /* Inset for pressed / sunken controls */
  --shadow-inset: inset 0 2px 4px rgba(31, 0, 51, 0.10);

  /* ---- Blur (glassy overlays on photo-heavy hero areas) ---- */
  --blur-sm: blur(6px);   /* @kind other */
  --blur-md: blur(14px);  /* @kind other */
  --blur-lg: blur(28px);  /* @kind other */

  /* Protection scrim for text over event photography */
  --scrim-bottom: linear-gradient(to top, rgba(20, 16, 26, 0.85) 0%, rgba(20, 16, 26, 0.45) 45%, rgba(20, 16, 26, 0) 100%); /* @kind other */
  --scrim-full: linear-gradient(180deg, rgba(31, 0, 51, 0.55) 0%, rgba(31, 0, 51, 0.70) 100%); /* @kind other */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur-base: 200ms;  /* @kind other */
  --dur-slow: 360ms;  /* @kind other */
}


/* === base.css === */
/* ============================================================
   Ohana Entertainment — Base element defaults
   Lightweight resets + brand-true defaults. Opt-in helpers
   for the script/display faces.
   ============================================================ */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings use the condensed Anton face, uppercase */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400; /* Anton is single-weight */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); text-transform: none; } /* h3 stays sentence-case */

h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
}
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 2px; }

strong { font-weight: var(--weight-bold); color: var(--text-strong); }
small { font-size: var(--text-sm); }

:focus-visible { outline: var(--border-thick) solid var(--focus-ring); outline-offset: 2px; }

/* ---- Utility text roles ---- */
.oh-script {
  font-family: var(--font-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
}
.oh-overline {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  color: var(--brand-secondary);
}
.oh-display {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: var(--leading-tight);
}