/* =============================================================
   TTN Design System — colors_and_type.css
   The Transformation Network (TTN) is a Kingdom-centred charity.

   ONE brand. ONE mode. Light, lavender, purposeful.
   Sourced from the Figma "TTN Branding" brand book.
   ============================================================= */

/* ---------- Webfonts ----------
   Switzer (display) from Fontshare.
   Open Sans + Manrope + Caveat + Public Sans from Google Fonts. */
@import url("https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700,800,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Manrope:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600;700;800&family=Public+Sans:wght@400;500;600;700&display=swap");

:root {
  /* =========================================================
     COLOR — TTN brand palette
     Sampled directly from the TTN brand-book "Primary Neutral
     Palette" + "Grey" specimens.
     ========================================================= */
  /* Primary Neutral Palette (5 swatches) */
  --royal:            #4B2E83;     /* Royal Purple — Main */
  --highlight:        #7A25F1;     /* Highlight Purple — emphasis / CTA */
  --lavender:         #B3A7D9;     /* Lavender — accent / soft border */
  --soft-lilac:       #F3F4F6;     /* Soft Lilac — tint surface (cool) */
  --golden-sand:      #FEFDF9;     /* Golden Sand — warm off-white canvas */

  /* Backwards-compat aliases for older cards (use the names above going forward) */
  --lavender-pale:    var(--soft-lilac);

  --purple-glow:      rgba(122,37,241,0.50);

  /* Surfaces — derived from the brand palette */
  --bg:               var(--soft-lilac);     /* primary slide canvas */
  --bg-warm:          var(--golden-sand);    /* warm canvas variant (cover, hero) */
  --bg-cool:          #F1F3F8;               /* alt cool canvas (family deck) */
  --surface:          #FFFFFF;               /* card / panel */

  /* Grey ramp — direct from the brand book */
  --grey-900:         #3A3F50;     /* primary body text */
  --grey-800:         #585E72;
  --grey-700:         #727A8F;
  --grey-600:         #4B5563;     /* note: brand-book Grey 600 sits darker than 700 */
  --grey-500:         #A9B0C3;
  --grey-400:         #C9CEDA;
  --grey-300:         #DADEE8;
  --grey-200:         #E7EBF2;
  --grey-100:         #F2F3F8;
  --grey-0:           #FFFFFF;
  --white:            #FFFFFF;
  --black:            #000000;

  /* Text — semantic */
  --ink:              #111111;             /* heading display text */
  --ink-2:            var(--grey-900);     /* #3A3F50 — body text */
  --ink-3:            var(--grey-800);     /* #585E72 — muted text */
  --ink-4:            var(--grey-700);     /* #727A8F — captions */

  /* Semantic aliases — use these in components */
  --fg:               var(--ink);
  --fg-2:             var(--ink-2);
  --fg-3:             var(--ink-3);
  --accent:           var(--highlight);    /* default brand accent */
  --accent-deep:      var(--royal);
  --accent-soft:      var(--lavender);
  --border:           var(--grey-200);
  --border-soft:      var(--soft-lilac);

  /* =========================================================
     SIGNATURE GRADIENTS
     ========================================================= */
  /* The hallmark "underline" gradient under TTN titles */
  --ttn-rainbow: linear-gradient(
    90deg,
    #4B2E83 0%,
    #7A25F1 26%,
    #7A25F1 46%,
    #B3A7D9 58%,
    #F3F4F6 79%,
    rgba(243,244,246,0) 100%
  );

  /* Cover bloom — purple corner gradient (from brand-book cover) */
  --ttn-cover-bloom-1:
    radial-gradient(60% 60% at 20% 80%,
      rgba(122,37,241,0.55) 0%,
      rgba(188,145,248,0.30) 45%,
      rgba(255,255,255,0) 78%);
  --ttn-cover-bloom-2:
    radial-gradient(60% 60% at 10% 0%,
      rgba(179,167,217,0.50) 0%,
      rgba(179,167,217,0) 80%);

  /* Purple section background (reviews / CTA) */
  --ttn-section-purple:
    linear-gradient(135deg, #7A25F1 0%, #4B2E83 100%);

  /* Card surface tint — used for the "white-ish" cards on lavender bg */
  --ttn-card-tint:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.80));

  /* =========================================================
     RADII
     ========================================================= */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* =========================================================
     SHADOWS / ELEVATION (all use the brand's lavender / blue-grey tints)
     ========================================================= */
  --shadow-soft:     0px 12px 32px rgba(58,63,80,0.10);    /* brand-book panel */
  --shadow-card:     0px 8px 23px rgba(58,63,80,0.10);
  --shadow-lavender: 5px 6px 25px rgba(179,167,217,0.30);   /* family-deck card */
  --shadow-press:    0 14px 38px rgba(122,37,241,0.20);     /* hover-deepened CTA */
  --shadow-inset-up: inset 0px 1px 0px rgba(255,255,255,0.40);

  /* =========================================================
     SPACING (8-pt base)
     ========================================================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 64px;
  --space-9: 80px;
  --gutter-deck: 80px;     /* slide outer gutter */
  --gutter-card: 40px;     /* card inner padding */

  /* =========================================================
     TYPOGRAPHY — Families
     Brand-book canonical: Switzer (titles) + Open Sans (paragraphs).
     ========================================================= */
  --font-display:  "Switzer", "Manrope", system-ui, sans-serif;   /* Tipografia — Títulos */
  --font-body:     "Open Sans", "Manrope", system-ui, sans-serif; /* Tipografia — Parágrafos */
  --font-soft:     "Open Sans", "Manrope", system-ui, sans-serif; /* alias for body */
  --font-justify:  "Manrope", "Open Sans", system-ui, sans-serif; /* long-form justified copy */
  --font-ui:       "Public Sans", "Open Sans", system-ui, sans-serif;
  --font-script:   "Caveat", "Comic Sans MS", cursive;            /* hand-lettered accents */
  --font-label:    "Public Sans", "Open Sans", system-ui, sans-serif;  /* 24px section labels (was Cerebri Sans Pro) */

  /* =========================================================
     TYPOGRAPHY — Semantic scale
     Slide canvas is 1920×1080; type sizes peak accordingly.
     Mirrors the brand-book "Head 48 / 40 / 32 / 24" specimen.
     ========================================================= */
  /* Display — Switzer */
  --t-display-hero:  168px;   /* deck cover */
  --t-display-1:     130px;   /* "Welcome, families!" */
  --t-display-2:      80px;   /* section heads */
  --t-display-3:      48px;   /* sub-section heads */

  /* Headings — Switzer */
  --t-h1:  68px;     /* matches brand-book "Head 48 · 68px line-height" */
  --t-h2:  44px;
  --t-h3:  32px;
  --t-h4:  24px;
  --t-h5:  20px;

  /* Body — Open Sans */
  --t-body-xl:  42px;   /* hero quote */
  --t-body-lg:  28px;   /* slide body */
  --t-body:     20px;
  --t-body-sm:  16px;
  --t-caption:  14px;
  --t-micro:    12px;

  /* Section eyebrow */
  --t-eyebrow:  24px;

  /* =========================================================
     LINE-HEIGHTS / TRACKING
     ========================================================= */
  --lh-tight: 1.00;
  --lh-snug:  1.10;
  --lh-base:  1.38;     /* brand-book "Head" line-height ratio */
  --lh-body:  1.50;

  --track-tight:  -0.020em;
  --track-normal:  0em;
  --track-wide:    0.020em;
  --track-label:   0.035em;

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in:   cubic-bezier(.7,0,.84,0);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast:  140ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
}

/* =========================================================
   SEMANTIC TYPE STYLES
   Use these classes rather than redeclaring sizes inline.
   ========================================================= */
.t-display-hero { font-family: var(--font-display); font-weight: 900; font-size: var(--t-display-hero); line-height: var(--lh-tight); letter-spacing: var(--track-wide); }
.t-display-1    { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-1);    line-height: var(--lh-tight); letter-spacing: var(--track-wide); }
.t-display-2    { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-2);    line-height: var(--lh-snug);  letter-spacing: var(--track-wide); }
.t-display-3    { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-3);    line-height: var(--lh-base);  letter-spacing: var(--track-tight); }

.t-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h1); line-height: var(--lh-base); letter-spacing: var(--track-tight); }
.t-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h2); line-height: var(--lh-base); letter-spacing: var(--track-tight); }
.t-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); line-height: var(--lh-base); letter-spacing: var(--track-tight); }
.t-h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h4); line-height: var(--lh-base); letter-spacing: var(--track-tight); }
.t-h5 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h5); line-height: var(--lh-base); }

.t-body-xl { font-family: var(--font-body); font-weight: 500; font-size: var(--t-body-xl); line-height: var(--lh-snug); }
.t-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body-lg); line-height: var(--lh-body); }
.t-body    { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body);    line-height: var(--lh-body); }
.t-body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body-sm); line-height: var(--lh-body); }
.t-caption { font-family: var(--font-ui);   font-weight: 500; font-size: var(--t-caption); line-height: var(--lh-base); }
.t-micro   { font-family: var(--font-ui);   font-weight: 500; font-size: var(--t-micro);   line-height: var(--lh-base); letter-spacing: var(--track-label); text-transform: uppercase; }

.t-eyebrow {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-tight);
  color: var(--royal);
}

.t-script {
  font-family: var(--font-script);
  font-weight: 700;
}

/* =========================================================
   SIGNATURE COMPONENTS — quick utilities
   ========================================================= */
.ttn-underline {
  height: 6px;
  border-radius: 3px;
  background: var(--ttn-rainbow);
}

/* =========================================================
   BASE RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
}