/* Design tokens — eyedropped from reference/*.png (About, Experience, ImpactMetrics,
   Project, Resume, TechStack, Contact). Every section should read colors, fonts,
   borders and shadows from these variables instead of hard-coding hex values. */

:root {
  /* Core palette */
  --color-black: #111111;
  --color-white: #ffffff;
  --color-bg-offwhite: #ffffff;

  /* Crimson accent: bright red for headline/display text and links,
     darker red for solid-filled buttons/tags */
  --color-accent: #cf364c;
  --color-accent-strong: #a22738;

  /* Text */
  --color-text: var(--color-black);
  --color-text-muted: #6b6b6b;

  /* Dark surface (Contact section): near-black background with
     white/translucent-white text on top of it. */
  --color-bg-dark: #111111;
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.55);
  --color-border-on-dark: rgba(255, 255, 255, 0.3);

  /* "Open to work" pill */
  --color-pill-bg: #e4f6e7;
  --color-pill-text: #316743;
  --color-pill-dot: #4c9c65;

  /* Tinted icon swatches (About Statement "What I Do" / "What's Next"). */
  --color-icon-tint-neutral-bg: #ececea;
  --color-icon-tint-neutral-fg: var(--color-black);
  --color-icon-tint-accent-bg: var(--color-pill-bg);
  --color-icon-tint-accent-fg: var(--color-pill-text);

  /* Card / button border + solid offset drop shadow (no blur) */
  --border-width: 2px;
  --border-color: var(--color-black);
  --shadow-offset: 6px;
  --shadow-color: var(--color-black);
  --shadow-hard: var(--shadow-offset) var(--shadow-offset) 0 0 var(--shadow-color);

  --radius-sm: 4px;
  --radius-card: 8px;
  --radius-pill: 999px;

  /* Softer, restrained card language for the hero refinement — sits
     alongside the hard-edge system above rather than replacing it, so
     other approved sections are unaffected. */
  --shadow-soft: 0 1px 2px rgba(17, 17, 17, 0.04), 0 10px 24px -14px rgba(17, 17, 17, 0.14);
  --shadow-soft-hover: 0 2px 4px rgba(17, 17, 17, 0.06), 0 16px 32px -14px rgba(17, 17, 17, 0.18);
  --radius-soft-sm: 10px;
  --radius-soft-md: 14px;
  --border-color-soft: rgba(17, 17, 17, 0.08);
  --border-color-accent-soft: rgba(207, 54, 76, 0.22);
  --border-color-accent-soft-hover: rgba(207, 54, 76, 0.4);
  --color-accent-pale: rgba(207, 54, 76, 0.07);
  --color-accent-pale-strong: rgba(207, 54, 76, 0.12);

  /* Diagonal-stripe placeholder fill (photo/illustration boxes) */
  --color-placeholder-a: #fdf2f3;
  --color-placeholder-b: #efe5e6;

  /* Faint graph-paper grid (Resume section background). */
  --color-grid-line: rgba(17, 17, 17, 0.06);

  /* Impact Metrics card fills — one solid color per metric. */
  --color-metric-green: #2f6a4e;
  --color-metric-blue: #3762e3;
  --color-metric-magenta: #b22e5b;
  --color-metric-orange: #ab4b21;
  --color-metric-purple: #743ee4;

  /* Type — eyedropped letterforms are a rounded geometric bold sans
     (display + body), a monospace for small-caps labels, and a script
     face for the pull-quote. */
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-script: "Caveat", cursive;

  /* Heavy grotesk used for every display heading and big metric figure
     (e.g. "VARSHA", "4+", "TECH STACK", "EXPERIENCE HIGHLIGHTS") —
     stretched wide with font-stretch and tightened with negative
     letter-spacing for the reference's compressed poster look. */
  --font-chunky: "Archivo", var(--font-display);
  --font-chunky-weight: 900;
  --font-chunky-stretch: 118%;
  --font-chunky-tracking: -0.02em;

  --tracking-label: 0.08em;

  /* Scroll-entrance motion (src/components/scroll_reveal.js) */
  --reveal-duration: 550ms;
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-distance: 22px;
}