/* =========================================================================
   FILIZ ÇELEBI — DESIGN TOKENS
   Cosmic sidewave palette: deep night-blue, plum, hot magenta, pink gradients,
   mint utility accent.  Heavy condensed display sans + grotesque body + mono.
   ========================================================================= */


:root {
  /* ---------- COLOR — Deep / Night ---------- */
  --night-deep:    #0B0820;   /* deepest canvas — footer, behind hero */
  --night:         #14102E;   /* primary background — body */
  --night-soft:    #1C1640;   /* surface base */
  --plum:          #2D0F47;   /* raised surface, panels */
  --plum-2:        #3F1659;   /* hover / cards on plum */
  --plum-3:        #4F1D6A;   /* pressed */
  --orchid-dim:    #6B1F8E;   /* hairline-strong */
  --hairline:      rgba(255, 255, 255, 0.10);
  --hairline-strong: rgba(255, 255, 255, 0.18);

  /* ---------- COLOR — Hot accents ---------- */
  --magenta:       #D03AA8;   /* primary accent — hot center of laser */
  --pink:          #FF4FA9;   /* CTA / signature pink */
  --pink-bright:   #FF7BC3;
  --pink-soft:     #FFB3D9;
  --pink-pale:     #FAD9EA;
  --lavender:      #C8B6E8;
  --peach:         #F5C5A8;   /* sunset warm — used very rarely */
  --violet-neon:   #B026FF;   /* face-ring electric violet */

  /* ---------- COLOR — Utility / micro-accent ---------- */
  --mint:          #6FE2D4;   /* "W. Honors" tab style — small badges only */
  --mint-bg:       rgba(111, 226, 212, 0.14);

  /* ---------- COLOR — Text ---------- */
  --text-1:        #FFFFFF;        /* primary on dark */
  --text-2:        #C8B6E8;        /* secondary on dark — lavender tint */
  --text-3:        #8576A5;        /* tertiary / muted */
  --text-mono:     #E9D5F2;        /* mono label color on dark */
  --text-on-light: #1A0E2E;        /* dark plum, for use on pink/pale bg */
  --text-on-pink:  #1A0E2E;        /* for buttons */

  /* ---------- COLOR — Semantic ---------- */
  --success:       #6FE2D4;        /* mint */
  --warning:       #F5C5A8;        /* peach */
  --danger:        #FF4FA9;        /* pink doubles as danger */
  --info:          var(--lavender);

  /* ---------- COLOR — Signature gradients ---------- */
  --grad-cosmos:   linear-gradient(180deg,
                     #0B0820 0%,
                     #2D0F47 22%,
                     #6B1F8E 48%,
                     #D03AA8 72%,
                     #FFB3D9 92%,
                     #FAD9EA 100%);

  --grad-sunset:   linear-gradient(180deg,
                     #1F0F3F 0%,
                     #6B1F8E 28%,
                     #D03AA8 55%,
                     #FF7BC3 75%,
                     #F5C5A8 92%,
                     #2D0F47 100%);

  --grad-night-up: linear-gradient(180deg,
                     #14102E 0%,
                     #2D0F47 50%,
                     #4F1D6A 100%);

  --grad-haze:     linear-gradient(180deg,
                     rgba(255, 75, 169, 0) 0%,
                     rgba(255, 75, 169, 0.45) 50%,
                     rgba(255, 75, 169, 0) 100%);    /* the laser-streak band */

  --grad-text:     linear-gradient(180deg, #FFFFFF 0%, #FFB3D9 100%);

  /* ---------- TYPE — Families ---------- */
  --font-display:  'Big Shoulders Display', 'Druk Wide', 'Anton', 'Inter', sans-serif;
  --font-sans:     'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', 'Space Mono', ui-monospace, Menlo, monospace;

  /* ---------- TYPE — Scale ---------- */
  --fs-hero:       clamp(72px, 11vw, 180px);    /* hero display, ALL CAPS */
  --fs-display:    clamp(56px, 7vw, 104px);
  --fs-h1:         clamp(40px, 4.5vw, 72px);
  --fs-h2:         clamp(32px, 3.5vw, 52px);
  --fs-h3:         24px;
  --fs-h4:         18px;
  --fs-body-lg:    17px;
  --fs-body:       15px;
  --fs-body-sm:    13px;
  --fs-caption:    11px;
  --fs-eyebrow:    10px;

  /* ---------- TYPE — Weights ---------- */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-black:      800;
  --fw-heavy:      900;

  /* ---------- TYPE — Leading ---------- */
  --lh-tight:      0.92;
  --lh-snug:       1.05;
  --lh-normal:     1.5;
  --lh-loose:      1.7;

  /* ---------- TYPE — Tracking ---------- */
  --ls-tight:      -0.02em;
  --ls-normal:     0;
  --ls-wide:       0.08em;
  --ls-eyebrow:    0.22em;
  --ls-mono:       0.12em;

  /* ---------- SPACING ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- RADII ---------- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ---------- SHADOW & GLOW ---------- */
  --shadow-card:  0 12px 32px -16px #000, 0 2px 6px -2px rgba(0,0,0,0.5);
  --shadow-lift:  0 24px 60px -24px #000, 0 10px 22px -10px rgba(0,0,0,0.7);
  --glow-pink:    0 0 24px -2px rgba(255, 79, 169, 0.6), 0 0 60px -8px rgba(255, 79, 169, 0.3);
  --glow-magenta: 0 0 32px -4px rgba(208, 58, 168, 0.7), 0 0 80px -16px rgba(208, 58, 168, 0.4);
  --glow-violet:  0 0 28px -2px rgba(176, 38, 255, 0.65);
  --glow-mint:    0 0 18px -4px rgba(111, 226, 212, 0.55);

  /* ---------- BORDERS ---------- */
  --bw-hairline: 1px;
  --bw-emphasis: 1.5px;

  /* ---------- GLASS / BLUR ---------- */
  --glass-bg:     rgba(45, 15, 71, 0.45);
  --glass-bg-2:   rgba(20, 16, 46, 0.55);
  --glass-blur:   blur(20px) saturate(160%);
  --glass-border: 1px solid rgba(255, 255, 255, 0.14);

  /* ---------- MOTION ---------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-physics:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:      180ms;
  --dur-base:      320ms;
  --dur-slow:      600ms;
  --dur-cinematic: 1200ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1280px;
  --gutter:        24px;
  --nav-height:    64px;
}

/* =========================================================================
   GLOBAL RESET / BASE
   ========================================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--night);
  color: var(--text-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY
   ========================================================================= */

/* Display — Big Shoulders, heavy, ALL CAPS, tight tracking. The voice. */
.t-hero, h1.hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--text-1);
}

.t-display, .display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--text-1);
}

.t-h1, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--text-1);
}

.t-h2, h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--text-1);
}

.t-h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  color: var(--text-1);
  letter-spacing: -0.01em;
}

.t-h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  color: var(--text-1);
}

.t-body-lg, p.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--text-2);
}

.t-body, p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-2);
}

.t-body-sm, small {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--text-2);
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--text-3);
}

/* Eyebrow / section label — mono, fixed-width, all-caps */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-mono);
}

/* Mono bracket label — "[ ORIGIN ]" sidewave-style */
.t-bracket {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-1);
}
.t-bracket::before { content: "[ "; opacity: 0.7; }
.t-bracket::after  { content: " ]"; opacity: 0.7; }

/* Gradient text — for headlines that want to fade into pink */
.t-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Data / metric */
.t-data {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  color: var(--text-1);
}

/* Pull-quote — display sans italic via skew, since Big Shoulders has no italic;
   we use lavender on dark for editorial warmth */
.t-quote {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: 26px;
  line-height: 1.4;
  color: var(--pink-soft);
}

code, pre, .t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--text-mono);
}

a {
  color: var(--pink-bright);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--pink); }