/* ============================================================
   RISHI D V — PORTFOLIO DESIGN SYSTEM
   colors_and_type.css — foundational tokens
   ------------------------------------------------------------
   A stark, monochrome, developer-forward system. Pure black
   canvas, off-white ink, a single neutral grayscale ramp, and
   a code-authentic type pairing (Manrope + JetBrains Mono).
   Fonts are loaded from Google Fonts (these ARE the fonts, not
   substitutes). See README for substitution notes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root {
  /* ---------- CORE NEUTRALS (the whole palette) ---------- */
  --black:        #000000;  /* true black — the canvas */
  --ink-950:      #060606;  /* near-black surface lift */
  --ink-900:      #0d0d0d;  /* raised panel / card */
  --ink-850:      #141414;  /* card hover */
  --ink-800:      #1c1c1c;  /* hairline-strong / inset */
  --ink-700:      #2a2a2a;  /* borders, dividers */
  --ink-600:      #3d3d3d;  /* strong border / disabled fg */
  --ink-500:      #5c5c5c;  /* muted text on dark */
  --ink-400:      #7d7d7d;  /* secondary text */
  --ink-300:      #a6a6a6;  /* tertiary / captions */
  --ink-200:      #cfcfcf;  /* near-white secondary */
  --ink-100:      #e8e8e8;  /* primary text (soft white) */
  --white:        #fafafa;  /* off-white — headings, max ink */
  --pure-white:   #ffffff;  /* reserved: illustration whites */

  /* ---------- SEMANTIC: foreground on dark ---------- */
  --fg1: var(--white);      /* primary headings */
  --fg2: var(--ink-100);    /* body copy */
  --fg3: var(--ink-300);    /* secondary / captions */
  --fg4: var(--ink-500);    /* muted / placeholder */
  --fg-disabled: var(--ink-600);

  /* ---------- SEMANTIC: surfaces ---------- */
  --bg-canvas:  var(--black);
  --bg-surface: var(--ink-900);
  --bg-raised:  var(--ink-850);
  --bg-inset:   var(--ink-950);

  /* ---------- SEMANTIC: lines ---------- */
  --border-subtle:  var(--ink-800);
  --border-default: var(--ink-700);
  --border-strong:  var(--ink-600);
  --hairline: rgba(250, 250, 250, 0.10); /* faint white rule over imagery */

  /* ---------- INVERTED (light-on-light "paper" mode) ---------- */
  /* The core interactive motif is INVERSION: white-on-black flips
     to black-on-white on primary actions and "paper" surfaces. */
  --paper:       #fafafa;
  --paper-ink:   #0d0d0d;
  --paper-ink-2: #3d3d3d;

  /* ---------- FUNCTIONAL (used sparingly; kept low-chroma) ---------- */
  --ok:    #9fcf9f;   /* success — desaturated sage */
  --warn:  #d8c98f;   /* warning — muted ochre */
  --err:   #d89f9f;   /* error  — muted rose  */

  /* ============================================================
     TYPE
     ============================================================ */
  --font-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-script:  'Caveat', cursive;

  /* Type scale — fluid-ish, set for a dark hero portfolio */
  --fs-display: 88px;   /* hero numerals / oversized */
  --fs-h1:      56px;
  --fs-h2:      40px;
  --fs-h3:      28px;
  --fs-h4:      20px;
  --fs-body-lg: 19px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;
  --fs-label:   12px;   /* mono eyebrow labels */

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --tracking-display: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-label:    0.18em;  /* mono eyebrows, ALL CAPS */
  --tracking-wide:     0.04em;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ============================================================
     SPACING — 4px base grid
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ---------- RADII (restrained; mostly sharp) ---------- */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---------- ELEVATION (shadows read as glow/depth on black) ---------- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.6);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.7);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.8);
  --shadow-glow: 0 0 0 1px rgba(250,250,250,0.06), 0 8px 40px rgba(0,0,0,0.9);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-med:  240ms;
  --dur-slow: 520ms;

  /* ---------- TEXTURE ---------- */
  --grain-opacity: 0.04; /* subtle film grain over surfaces */
  --vignette: radial-gradient(120% 90% at 70% 40%, transparent 40%, rgba(0,0,0,0.6) 100%);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — apply via classes
   ============================================================ */

.ds-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg1);
}
.ds-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-wrap: balance;
}
.ds-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-wrap: balance;
}
.ds-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.ds-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
.ds-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  text-wrap: pretty;
}
.ds-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg2);
  text-wrap: pretty;
}
.ds-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg3);
}
/* The signature eyebrow: mono, uppercase, wide-tracked, muted. */
.ds-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg3);
}
.ds-code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg2);
}
/* Oversized monospace numerals — section indices, like the "314852"
   ghosted numerals in the hero illustration. */
.ds-numeral {
  font-family: var(--font-mono);
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-wide);
  color: var(--fg4);
}