/* ============================================================
   Claira — foundations: tokens, reset, typography, rhythm

   The ground is the brand gradient itself: light pink into
   lavender into periwinkle. Display type sits on it in white;
   everything that has to be read closely sits in deep violet
   ink, so the palette never costs legibility.
   ============================================================ */

:root{
  /* brand gradient */
  --pink:        #FBD2F3;
  --blush:       #F3C0EF;
  --orchid:      #DBB0F4;
  --peri:        #B7A9F6;
  --iris:        #9A8EF2;
  --violet:      #6E5CE4;

  --grad:        linear-gradient(146deg, var(--pink) 0%, var(--blush) 26%, var(--orchid) 58%, var(--peri) 86%, var(--iris) 100%);
  --grad-flat:   linear-gradient(180deg, var(--pink) 0%, var(--orchid) 52%, var(--peri) 100%);
  --grad-deep:   linear-gradient(96deg, #6E5CE4 0%, #8E63E0 46%, #C563CF 100%);
  --pale:        #EFDCF7;

  /* ink */
  --white:       #ffffff;
  --ink:         #2C1A63;
  --dim:         rgba(44,26,99,.70);
  --dimmer:      rgba(44,26,99,.46);
  --ink-soft:    rgba(44,26,99,.66);

  /* surfaces */
  --panel:       rgba(255,255,255,.46);
  --panel-2:     rgba(255,255,255,.74);
  --line:        rgba(44,26,99,.13);
  --line-strong: rgba(44,26,99,.22);

  /* radii */
  --r-xs: 8px;
  --r-s:  12px;
  --r-m:  18px;
  --r-l:  26px;
  --r-xl: 38px;

  /* elevation — violet-tinted, never grey */
  --lift:   0 16px 40px -20px rgba(72,42,140,.34);
  --lift-2: 0 40px 80px -34px rgba(72,42,140,.42);

  /* motion */
  --e-out: cubic-bezier(.16,.84,.28,1);
  --e-io:  cubic-bezier(.62,.02,.24,1);
  --t-xs: .16s;
  --t-s:  .28s;
  --t-m:  .48s;
  --t-l:  .9s;

  /* rhythm */
  --shell: 1440px;
  --gut: clamp(20px, 4.4vw, 76px);
  --sec: clamp(58px, 8vh, 104px);

  /* type */
  --f-display: "Fredoka", "Gabarito", system-ui, sans-serif;
  --f-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:#EFB6EE;
}

body{
  margin:0;
  min-height:100%;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* the ground: one stable field, painted once, never animated */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:-2;
  background:
    radial-gradient(78% 52% at 88% 0%, rgba(255,255,255,.40) 0%, transparent 58%),
    radial-gradient(80% 55% at 2% 98%, rgba(140,128,238,.38) 0%, transparent 62%),
    linear-gradient(168deg, #F7C2EC 0%, #EFB6EE 22%, #D5A8F2 52%, #B2A2F5 80%, #9C93F1 100%);
}

/* very fine grain — kills gradient banding, adds material */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--violet); color:#fff; }

:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
  border-radius:4px;
}

/* ── layout ─────────────────────────────────────────────── */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.shell--wide{ max-width:1720px; }

section{ position:relative; }

.vh{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── typography ─────────────────────────────────────────── */
.display{
  font-family:var(--f-display);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:.94;
  margin:0;
  text-wrap:balance;
}

/* display type is white on the gradient; a soft violet shadow keeps
   it readable across the pale top of the field */
.d-1,.d-2{
  color:var(--white);
  text-shadow:0 2px 12px rgba(78,44,150,.16);
}
.d-1{ font-size:clamp(46px, 7.6vw, 122px); }
.d-2{ font-size:clamp(38px, 5.2vw, 82px); }
.d-3{ font-size:clamp(28px, 3.1vw, 48px); letter-spacing:-.024em; line-height:1.02; }
.d-4{ font-size:clamp(21px, 1.7vw, 27px); letter-spacing:-.018em; line-height:1.14; font-weight:600; }

.lede{
  font-size:clamp(16px, 1.15vw, 19px);
  line-height:1.62;
  color:var(--ink-soft);
  max-width:46ch;
  margin:0;
  text-wrap:pretty;
}
.lede--tight{ max-width:34ch; }

.meta{
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dimmer);
}

.num{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

.grad-text{
  background:var(--grad-deep);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}

/* ── pale scope: flat lilac blocks, ink type ─────────────── */
.on-pale{ color:var(--ink); }
.on-pale .lede{ color:var(--ink-soft); }
.on-pale .meta{ color:var(--dimmer); }
.on-pale .d-1, .on-pale .d-2{ color:var(--ink); text-shadow:none; }

/* ── reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}