/* ==========================================================================
   Aditya Yellamraju — Portfolio Design System
   Foundations: Color + Typography
   ========================================================================== */

/* --- Webfont ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400&display=swap');

:root {
  /* ====================================================================
     BRAND PALETTE
     The signature is Electric Indigo (#491cff) — bold, near-UV violet — 
     paired with a soft Hot Pink (#ff99d4). All accent gradients run
     between these two points. Everything else is neutral.
     ==================================================================== */

  /* Primary brand */
  --brand:           #491cff;  /* Electric Indigo — primary accent, CTAs, borders */
  --brand-700:       #3a15cc;
  --brand-500:       #7b4dff;  /* lighter, used inside brand gradients */
  --brand-300:       #a78fff;  /* soft lavender, for dark-mode accents & labels */

  /* Brand secondary */
  --brand-pink:      #ff99d4;  /* Soft pink — gradient companion, accents */
  --brand-pink-deep: #c4006d;  /* Deep magenta — used inside pink gradients */

  /* Neutrals — dark (hero, footer) */
  --dark:            #1c1c1c;
  --dark-2:          #2b2b2b;
  --dark-3:          #0f0f0f;

  /* Neutrals — light (body background gradient stops) */
  --light-start:     #f0f4f8;
  --light-end:       #d6dee6;

  /* Text tokens */
  --text-dark:       #0f0f0f;
  --text-mid:        #3a3a3a;
  --text-light:      #ffffff;
  --text-muted-d:    rgba(255, 255, 255, 0.65);
  --text-subtle-d:   rgba(255, 255, 255, 0.4);
  --text-dim-d:      rgba(255, 255, 255, 0.3);
  --text-muted-l:    rgba(0, 0, 0, 0.55);
  --text-subtle-l:   rgba(0, 0, 0, 0.4);

  /* Semantic */
  --success:         #22c55e;
  --success-soft:    #4ade80;
  --info:            #3b82f6;
  --info-soft:       #93c5fd;

  /* Surfaces (dark card bodies) */
  --surface-d-0:     rgba(255, 255, 255, 0.03);
  --surface-d-1:     rgba(255, 255, 255, 0.05);
  --surface-d-2:     rgba(255, 255, 255, 0.08);
  --border-d-1:      rgba(255, 255, 255, 0.08);
  --border-d-2:      rgba(255, 255, 255, 0.12);

  /* Gradients — used as fills, NOT backgrounds of the whole page */
  --grad-body:       linear-gradient(to bottom, var(--light-start), var(--light-end) 75%);
  --grad-hero:       linear-gradient(135deg, var(--dark-2) 0%, var(--dark) 100%);
  --grad-brand:      linear-gradient(135deg, var(--brand) 0%, var(--brand-500) 100%);
  --grad-brand-pink: linear-gradient(135deg, var(--brand) 0%, var(--brand-pink) 100%);
  --grad-pink-deep:  linear-gradient(to top, var(--brand-pink-deep), var(--brand-pink));
  --grad-stripe:     linear-gradient(to right, var(--brand), var(--brand-pink));

  /* ====================================================================
     TYPOGRAPHY
     One family. Source Sans 3 does everything — weights 300..900 carry
     all hierarchy. No serif, no mono outside inline UI chrome.
     ==================================================================== */

  --font-sans:       'Source Sans 3', ui-sans-serif, system-ui, -apple-system,
                     Segoe UI, Roboto, sans-serif;
  --font-mono:       ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — clamp()-based for fluid layouts */
  --fs-display:      clamp(48px, 5.5vw, 88px);  /* hero headline */
  --fs-h1:           38px;                       /* section heads */
  --fs-h2:           34px;                       /* card titles */
  --fs-h3:           28px;                       /* sub-heads */
  --fs-lead:         clamp(17px, 1.4vw, 22px);   /* hero sub, about copy */
  --fs-body-lg:      20px;
  --fs-body:         18px;
  --fs-body-sm:      16px;
  --fs-small:        14px;
  --fs-micro:        13px;
  --fs-caption:      12px;
  --fs-eyebrow:      11px;

  /* Weights — bias heavy. 900 for display, 700 for UI, 400 for body. */
  --fw-light:        300;
  --fw-regular:      400;
  --fw-semibold:     600;
  --fw-bold:         700;
  --fw-black:        900;

  /* Line heights */
  --lh-tight:        1.02;   /* display */
  --lh-snug:         1.15;   /* headings */
  --lh-normal:       1.5;    /* body */
  --lh-relaxed:      1.7;    /* long-form / subheads */

  /* Letter spacing */
  --tr-display:      -2.5px;  /* big display pulls tight */
  --tr-head:         -0.5px;
  --tr-eyebrow:      1.5px;   /* uppercase eyebrow labels */
  --tr-eyebrow-lg:   1.2px;

  /* ====================================================================
     SHAPE + ELEVATION
     ==================================================================== */

  --radius-pill:     40px;   /* nav, chips, CTAs */
  --radius-pill-lg:  100px;  /* primary circular buttons */
  --radius-card:     26px;   /* project cards, hero borders */
  --radius-md:       18px;
  --radius-sm:       12px;
  --radius-xs:       8px;

  /* Shadows — brand-tinted when on light bg, black when on dark */
  --shadow-card:     0 24px 60px rgba(73, 28, 255, 0.15);
  --shadow-cta:      0 8px 32px rgba(73, 28, 255, 0.40);
  --shadow-cta-hov:  0 14px 40px rgba(73, 28, 255, 0.55);
  --shadow-hero:     0 40px 100px rgba(0, 0, 0, 0.5),
                     0 0 0 1px rgba(73, 28, 255, 0.2);
  --shadow-badge:    0 8px 32px rgba(0, 0, 0, 0.4);

  /* Borders */
  --border-brand:    2.5px solid var(--brand);
  --border-brand-1:  1px solid rgba(73, 28, 255, 0.25);

  /* ====================================================================
     MOTION
     All page-level motion uses the same ease and 0.6–0.9s durations.
     ==================================================================== */

  --ease-out-expo:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:        0.2s;
  --dur-med:         0.3s;
  --dur-slow:        0.7s;
  --dur-slower:      0.9s;
}

/* ==========================================================================
   Semantic element styles — use as resets / defaults in any doc that
   imports this file.
   ========================================================================== */

html { font-family: var(--font-sans); color: var(--text-dark); }

body {
  font-family: var(--font-sans);
  background: var(--grad-body);
  color: var(--text-dark);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--text-dark);
}

h2, .h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  color: var(--text-dark);
}

h3, .h3 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-head);
}

h4, .h4 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

p, .body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--text-mid);
}

.lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--text-mid);
}

.eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle-l);
}

.eyebrow-dark {
  color: var(--text-dim-d);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Brand gradient text — used on the word that matters in headlines. */
.gradient-text {
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-pink) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* The diagonal purple→pink stripe that bookends hero sections. */
.hero-stripe {
  height: 4px;
  background: var(--grad-stripe);
}