RH Summit Design System — global entry point.
   Consumers link THIS file only. It is a manifest of @import lines.
   =========================================================================== */

/* ===========================================================================
   RH Summit — Fonts
   Display: Big Shoulders (self-hosted, condensed grotesque, UPPERCASE display)
   Body:    Figtree (geometric humanist sans — Google Fonts)
   =========================================================================== */

/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/font-1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/font-2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/font-3.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/font-4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
  font-family: 'Big Shoulders';
  src: url("fonts/font-5.ttf") format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders';
  src: url("fonts/font-6.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders';
  src: url("fonts/font-7.ttf") format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders';
  src: url("fonts/font-8.ttf") format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders';
  src: url("fonts/font-9.ttf") format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders';
  src: url("fonts/font-10.ttf") format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders';
  src: url("fonts/font-11.ttf") format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ===========================================================================
   RH Summit — Colors
   A high-energy, near-fluorescent palette on deep ink navy.
   Each hue ships a base + a tint/shade pair (taken straight from the brand
   guidelines, slide "CORES"). Pink is the hero; navy is the canvas.
   =========================================================================== */

:root {
  /* ---- Brand base hues (guideline swatches) ---- */
  --rh-pink:          #F7229C;   /* primary / hero */
  --rh-pink-light:    #FF76C5;
  --rh-blue:          #0768F9;
  --rh-blue-light:    #4BBBFA;
  --rh-purple:        #AD40FF;
  --rh-purple-light:  #CD8BFF;
  --rh-green:         #1a7a4a;   /* the "go" / success accent */
  --rh-green-deep:    #43906E;

  /* ---- Ink & neutrals ---- */
  --rh-navy:          #0B0B2D;   /* primary dark canvas */
  --rh-navy-700:      #14143A;   /* raised surface on navy */
  --rh-navy-600:      #1E1E4D;   /* hairline / border on navy */
  --rh-black:         #0C0C0C;
  --rh-gray-100:      #F4F4F6;
  --rh-gray-200:      #ECECEC;   /* light surface / chips */
  --rh-gray-400:      #C7C7CF;
  --rh-gray-600:      #6E6E7A;
  --rh-white:         #FFFFFF;

  /* ---- Signature gradients (mesh / spotlight) ---- */
  --rh-gradient-spotlight: radial-gradient(120% 120% at 70% 35%, #AD40FF 0%, #6B1E9E 32%, #2A1A55 60%, #0B0B2D 100%); /* @kind color */
  --rh-gradient-pink:      linear-gradient(135deg, #F7229C 0%, #AD40FF 100%); /* @kind color */
  --rh-gradient-confirmado:linear-gradient(90deg, #F7229C 0%, #AD40FF 60%, #6A4BE0 100%); /* @kind color */
  --rh-gradient-event:     linear-gradient(160deg, #0B0B2D 0%, #2A1A55 45%, #AD40FF 78%, #F7229C 100%); /* @kind color */

  /* =========================================================
     Semantic aliases — reference these in product UI
     ========================================================= */

  /* Surfaces */
  --surface-base:      var(--rh-navy);     /* app/page background */
  --surface-raised:    var(--rh-navy-700); /* cards on navy */
  --surface-card:      var(--rh-white);    /* light card */
  --surface-muted:     var(--rh-gray-200);
  --surface-inverse:   var(--rh-white);

  /* Text */
  --text-strong:       var(--rh-white);    /* on dark */
  --text-body:         #C9C9D6;            /* on dark, secondary */
  --text-muted:        #8A8AA0;            /* on dark, tertiary */
  --text-on-light:     var(--rh-navy);     /* on white */
  --text-on-light-mut: var(--rh-gray-600);
  --text-accent:       var(--rh-pink);

  /* Brand roles */
  --brand-primary:     var(--rh-pink);
  --brand-primary-ink: var(--rh-white);    /* text on pink */
  --brand-action:      var(--rh-green);    /* "Garanta seu ingresso" */
  --brand-action-ink:  var(--rh-white);

  /* Lines */
  --border-on-dark:    rgba(255,255,255,0.14);
  --border-on-light:   rgba(11,11,45,0.12);
  --focus-ring:        var(--rh-pink-light);

  /* Status (mapped onto brand hues) */
  --status-success:    var(--rh-green);
  --status-info:       var(--rh-blue);
  --status-accent:     var(--rh-purple);
}

/* ===========================================================================
   RH Summit — Typography
   Two-family system:
   • Display  → Big Shoulders, condensed, ALL CAPS, tight leading. Headlines,
     numerals, posters, badges, big statements.
   • Body     → Figtree, sentence case, comfortable leading. UI, paragraphs,
     labels, captions, buttons.
   =========================================================================== */

:root {
  /* Families */
  --font-display: 'Big Shoulders', 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Weights */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black:     900; /* @kind font */

  /* Display scale (Big Shoulders) — condensed, so it runs large.
     Pair with var(--tracking-display) and line-height ~0.92. */
  --display-2xl:  clamp(64px, 12vw, 200px); /* @kind font */
  --display-xl:   clamp(48px, 8vw, 128px); /* @kind font */
  --display-lg:   72px;
  --display-md:   56px;
  --display-sm:   40px;
  --display-xs:   28px;

  /* Body / UI scale (Figtree) */
  --text-3xl:     32px;
  --text-2xl:     26px;
  --text-xl:      21px;
  --text-lg:      18px;
  --text-md:      16px;   /* base */
  --text-sm:      14px;
  --text-xs:      12px;
  --text-2xs:     10.5px;

  /* Line heights */
  --lh-display:   0.92; /* @kind other */
  --lh-tight:     1.1; /* @kind other */
  --lh-snug:      1.3; /* @kind other */
  --lh-normal:    1.5; /* @kind other */
  --lh-relaxed:   1.65; /* @kind other */

  /* Letter-spacing */
  --tracking-display: -0.01em;  /* @kind other */
  --tracking-tight:   -0.02em;  /* @kind other */
  --tracking-normal:  0;        /* @kind other */
  --tracking-wide:    0.04em;   /* @kind other */
  --tracking-eyebrow: 0.18em;   /* @kind other */
}

/* ---- Optional helper classes (consumers may use the tokens directly) ---- */
.rh-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.rh-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.rh-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
}

/* ===========================================================================
   RH Summit — Spacing, radii, shadows, motion
   The brand leans on fully-rounded "pill / capsule" geometry. Radii run large.
   =========================================================================== */

:root {
  /* Spacing — 4px base grid */
  --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;

  /* Radii — the system is round. "pill" is a signature shape. */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-2xl:  44px;
  --radius-pill: 999px;   /* capsules, buttons, chips, header bar */
  --radius-card: 28px;    /* social posts & content cards */

  /* Border widths */
  --border-thin:   1px;
  --border-regular:1.5px;
  --border-thick:  2px;

  /* Shadows — restrained; the palette does the lifting.
     On light backgrounds, soft neutral. On navy, glows are colored. */
  --shadow-sm:   0 1px 2px rgba(11,11,45,0.10);
  --shadow-md:   0 8px 24px rgba(11,11,45,0.14);
  --shadow-lg:   0 24px 60px rgba(11,11,45,0.22);
  --shadow-card: 0 18px 48px rgba(11,11,45,0.30);
  --glow-pink:   0 12px 48px rgba(247,34,156,0.45);
  --glow-green:  0 12px 40px rgba(95,192,147,0.45);
  --glow-purple: 0 12px 48px rgba(173,64,255,0.40);

  /* Motion */
  --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 */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */

  /* Layout */
  --container-max: 1200px; /* @kind spacing */
  --gutter:        24px; /* @kind spacing */
}