/* ──────────────────────────────────────────────────────────────
   MADHURI MARAM — Design Tokens
   Site Root: madhurimaram.com (static portfolio) + Emdash CMS
   Source: iruhdam1/website (index.html + CLAUDE.md)
   ──────────────────────────────────────────────────────────────
   This file defines the FULL token palette used across Madhuri's
   personal site. Foundation palette: neutral/green/lime/yellow/
   mauve ramps mapped into a COSS-style semantic token layer.
   Type: BIZ UDPMincho (display) + Onest (UI/body/label) +
   Fuzzy Bubbles (handwritten).
   ────────────────────────────────────────────────────────────── */

/* Google Fonts — display + UI + body + handwritten. */
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPMincho:wght@400&family=Onest:wght@400;500;700&family=Fuzzy+Bubbles:wght@400;700&display=swap");

/* Foundation color ramps — inlined locally so the static site does not depend on an external design-token package at runtime. */
:root, .light, .light-theme {
  --gray-1: #fcfcfc; --gray-2: #f9f9f9; --gray-3: #f0f0f0; --gray-4: #e8e8e8;
  --gray-5: #e0e0e0; --gray-6: #d9d9d9; --gray-7: #cecece; --gray-8: #bbbbbb;
  --gray-9: #8d8d8d; --gray-10: #838383; --gray-11: #646464; --gray-12: #202020;
  --mauve-1: #fdfcfd; --mauve-2: #faf9fb; --mauve-3: #f2eff3; --mauve-4: #eae7ec;
  --mauve-5: #e3dfe6; --mauve-6: #dbd8e0; --mauve-7: #d0cdd7; --mauve-8: #bcbac7;
  --mauve-9: #8e8c99; --mauve-10: #84828e; --mauve-11: #65636d; --mauve-12: #211f26;
  --grass-1: #fbfefb; --grass-2: #f5fbf5; --grass-3: #e9f6e9; --grass-4: #daf1db;
  --grass-5: #c9e8ca; --grass-6: #b2ddb5; --grass-7: #94ce9a; --grass-8: #65ba74;
  --grass-9: #46a758; --grass-10: #3e9b4f; --grass-11: #2a7e3b; --grass-12: #203c25;
  --lime-1: #fcfdfa; --lime-2: #f8faf3; --lime-3: #eef6d6; --lime-4: #e2f0bd;
  --lime-5: #d3e7a6; --lime-6: #c2da91; --lime-7: #abc978; --lime-8: #8db654;
  --lime-9: #bdee63; --lime-10: #b0e64c; --lime-11: #5c7c2f; --lime-12: #37401c;
  --yellow-1: #fdfdf9; --yellow-2: #fefce9; --yellow-3: #fffab8; --yellow-4: #fff394;
  --yellow-5: #ffe770; --yellow-6: #f3d768; --yellow-7: #e4c767; --yellow-8: #d5ae39;
  --yellow-9: #ffe629; --yellow-10: #ffdc00; --yellow-11: #9e6c00; --yellow-12: #473b1f;
}


:root {
  /* ─────────────────────────────────────
     FONT STACKS
     ───────────────────────────────────── */
  --font-heading: "BIZ UDPMincho", Georgia, serif;
  --font-display: "BIZ UDPMincho", Georgia, serif;  /* headings, hero name, section titles */
  --font-sans:    "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label:   "Onest", sans-serif;    /* nav, eyebrows, labels, meta */
  --font-body:    "Onest", sans-serif;    /* long-form reading */
  --font-hand:    "Fuzzy Bubbles", "Caveat", cursive;     /* rare handwritten accent */
  --font-mono:    ui-monospace, "SF Mono", Menjou, Consolas, monospace;

  /* ─────────────────────────────────────
     TYPE SCALE (matches index.html + emdash theme)
     ───────────────────────────────────── */
  --fs-2xs:  11px;   /* tiny labels */
  --fs-xs:   12px;   /* eyebrows, tiny meta */
  --fs-sm:   13px;   /* nav item, project tag, footer link */
  --fs-md-sm: 14px;  /* compact body / card copy */
  --fs-base: 16px;   /* body default */
  --fs-md:   17px;   /* hero bio, long-form body */
  --fs-lg:   20px;   /* activity card title */
  --fs-xl:   22px;   /* footer brand wordmark */
  --fs-2xl:  36px;   /* section title (h2) */
  --fs-hero: clamp(40px, 4.5vw, 64px); /* hero name (h1) */
  --fs-home-intro: 32px;
  --fs-home-intro-mobile: clamp(30px, 5vw, 42px);
  --fs-home-intro-mobile-sm: clamp(27px, 8vw, 34px);
  --fs-home-intro-mobile-xs: clamp(25px, 7.5vw, 30px);
  --fs-card-title-mobile: 18px;

  --lh-tight:   1.0;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;   /* body copy sweet spot */

  --tracking-tight: 0;         /* display type */
  --tracking-card:  0;
  --tracking-wide:  0.1em;     /* uppercase eyebrows */

  /* ─────────────────────────────────────
     COSS-ALIGNED SEMANTIC TOKENS
     Brand remains BIZ UDPMincho + Onest + the existing grass/lime system.
     ───────────────────────────────────── */
  --background:            #FAFAFA;
  --foreground:            var(--gray-12);
  --card:                  #ffffff;
  --card-foreground:       var(--gray-12);
  --popover:               #ffffff;
  --popover-foreground:    var(--gray-12);
  --primary:               var(--grass-11);
  --primary-foreground:    var(--grass-1);
  --secondary:             var(--gray-2);
  --secondary-foreground:  var(--gray-12);
  --muted:                 var(--gray-3);
  --muted-foreground:      var(--gray-11);
  --accent:                var(--grass-9);
  --accent-foreground:     var(--grass-1);
  --border:                var(--gray-5);
  --border-strong:         var(--gray-6);
  --input:                 var(--gray-4);
  --ring:                  var(--lime-9);
  --success:               var(--grass-9);
  --success-foreground:    var(--grass-1);
  --warning:               var(--yellow-9);
  --warning-foreground:    var(--yellow-12);
  --info:                  var(--mauve-8);
  --info-foreground:       var(--mauve-12);
  --destructive:           #b63e47;
  --destructive-foreground: #fff7f7;

  /* COSS-friendly aliases for future library/component reuse */
  --color-background:             var(--background);
  --color-foreground:             var(--foreground);
  --color-card:                   var(--card);
  --color-card-foreground:        var(--card-foreground);
  --color-popover:                var(--popover);
  --color-popover-foreground:     var(--popover-foreground);
  --color-primary:                var(--primary);
  --color-primary-foreground:     var(--primary-foreground);
  --color-secondary:              var(--secondary);
  --color-secondary-foreground:   var(--secondary-foreground);
  --color-muted:                  var(--muted);
  --color-muted-foreground:       var(--muted-foreground);
  --color-accent:                 var(--accent);
  --color-accent-foreground:      var(--accent-foreground);
  --color-border:                 var(--border);
  --color-input:                  var(--input);
  --color-ring:                   var(--ring);
  --color-destructive:            var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-info:                   var(--info);
  --color-info-foreground:        var(--info-foreground);
  --color-success:                var(--success);
  --color-success-foreground:     var(--success-foreground);
  --color-warning:                var(--warning);
  --color-warning-foreground:     var(--warning-foreground);

  /* Compatibility aliases for the current static site */
  --page-bg:       var(--background);
  --surface:       var(--secondary);   /* cards, panels */
  --surface-hover: var(--muted);
  --fg:            var(--foreground);  /* primary text */
  --fg-muted:      var(--muted-foreground);
  --fg-subtle:     var(--gray-9);      /* eyebrow, de-emphasis */
  --fg-inverse:    var(--primary-foreground);

  /* Brand accents — Madhuri's green system, mapped into the semantic layer above */
  --hero-bg:       var(--lime-4);      /* light lime wash (activities + hero alt) */
  --hero-bg-deep:  var(--primary);     /* dark-green hero/footer */
  --accent-hover:  var(--grass-10);
  --accent-bright: var(--lime-9);      /* highlights, skill fill */
  --accent-soft:   var(--grass-3);     /* activity card bg, hover chip */
  --accent-dark:   var(--primary);     /* footer bg, deep contrast */
  --accent-orange: #C45000;
  --accent-purple: #6B4FE0;
  --accent-pink:   #E85A8C;

  /* On-accent text colors — use against the dark-green hero/footer */
  --on-accent-dark:    var(--grass-1);
  --on-accent-muted:   var(--grass-3);
  --on-accent-subtle:  var(--grass-4);
  --on-accent-label:   var(--grass-7);

  /* Section-tint palette (Framer era, used for dynamic bg) */
  --tint-intro:      #32583F;   /* dark green */
  --tint-projects:   #9FE477;   /* bright green (lime-9 cousin) */
  --tint-sidequests: #D9EADA;   /* light green */
  --tint-writing:    #EBEADA;   /* light yellow */
  --tint-teaching:   #EBEBEB;   /* grey */

  /* Skill pill colors — pulled directly from index.html */
  --skill-product-strategy:  #5A189A;
  --skill-facilitation:      #377C2B;
  --skill-value-prop:        #C91075;
  --skill-design-sprints:    #415A77;
  --skill-system-design:     #17B28A;
  --skill-user-experience:   #8B2FC9;
  --skill-user-research:     #C45000;
  --skill-interface-design:  #4B244A;
  --skill-product-design:    #2D6A00;
  --skill-design-workshops:  #B07800;
  --skill-coaching:          #0078A8;
  --skill-mentoring:         #028090;
  --skill-prototyping:       #7A3E00;
  --skill-no-code:           #C0003A;
  --skill-mvp-design:        #1838E4;
  --skill-agentic-design:    #D4452B;
  --skill-llm-workflows:     #6B4FE0;
  --skill-vibe-coding:       #E85A8C;
  --skill-evals:             #00897B;

  /* ─────────────────────────────────────
     SPACING — 4-px base grid
     ───────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 100px;

  /* ─────────────────────────────────────
     RADIUS
     ───────────────────────────────────── */
  --radius:      12px;
  --radius-sm:   6px;     /* buttons, small panels */
  --radius-md:   12px;    /* cards, project cards, activity groups */
  --radius-lg:   14px;    /* sidenav trigger */
  --radius-pill: 9999px;  /* skill pills, tag pills */

  /* ─────────────────────────────────────
     SHADOW + ELEVATION
     ───────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:    0 4px 16px rgba(0,0,0,0.10);   /* sidenav trigger */
  --shadow-md:    0 8px 32px rgba(0,0,0,0.12);   /* dropdown panel */
  --shadow-lg:    0 16px 40px rgba(0,0,0,0.10);  /* card hover lift */
  --shadow-polaroid: 0 20px 60px rgba(0,0,0,0.35); /* hero polaroid */

  /* ─────────────────────────────────────
     LAYOUT
     ───────────────────────────────────── */
  --container-max: 1160px;
  --container-pad: 40px;
  --sidepanel-w:   320px;     /* Framer-era sticky sidebar */
  --sidenav-trigger: 48px;    /* round nav button */
  --hero-min-h:    520px;
  --home-hero-max-width: 800px;
  --home-hero-columns: 1fr 1fr;
  --home-hero-gap: var(--s-12);
  --home-hero-pad-inline: var(--s-8);
  --home-hero-copy-width: 302px;
  --home-hero-copy-pad-top: var(--s-10);
  --home-hero-copy-line-height: 1.2;
  --home-hero-copy-weight: 400;
  --home-hero-avatar-size: 80px;
  --home-hero-avatar-size-sm: 68px;
  --home-hero-avatar-offset-top: -110px;
  --home-hero-avatar-offset-left: 0px;
  --home-hero-underline-offset: 5px;
  --home-hero-underline-thickness: 2px;
  --home-hero-mobile-gap: var(--s-8);
  --home-hero-mobile-pad-top: var(--s-8);
  --home-hero-mobile-pad-bottom: var(--s-10);
  --home-hero-mobile-pad-inline: var(--s-8);
  --home-hero-mobile-pad-inline-sm: var(--s-5);
  --home-hero-mobile-pad-inline-xs: var(--s-4);
  --home-hero-mobile-avatar-gap: var(--s-5);
  --home-skills-mobile-h: 320px;
  --home-skills-mobile-h-sm: 380px;
  --home-skills-mobile-h-xs: 420px;

  --pill-bg: #EFEFEF;
  --pill-pad-y: 6px;
  --pill-pad-x: var(--s-3);
  --pill-font-size: var(--fs-sm);
  --pill-line-height: 16px;

  --card-header-gap: var(--s-4);
  --card-stack-gap: var(--s-2);
  --card-pad-y: var(--s-5);
  --card-pad-x: var(--s-6);
  --card-pad-y-compact: 18px;
  --card-pad-x-compact: 22px;
  --card-pad-x-mobile: var(--s-5);
  --card-pad-all-tight: var(--s-4);
  --card-title-size: var(--fs-xl);
  --card-title-size-tablet: var(--fs-lg);
  --card-copy-size: var(--fs-md-sm);
  --card-cta-size: var(--fs-sm);

  /* ─────────────────────────────────────
     MOTION
     ───────────────────────────────────── */
  --ease:         cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:     ease-out;
  --dur-fast:     0.15s;
  --dur-base:     0.2s;
  --dur-slow:     0.3s;
  --dur-crossfade:0.6s;  /* dynamic background section change */
}

/* ──────────────────────────────────────────────────────────────
   SEMANTIC TEXT STYLES — attach to elements directly
   ────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1, .hero-name {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h2, .h2, .section-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h3, .h3, .card-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--fg);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.eyebrow, .section-label {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.label, .nav-item {
  font-family: var(--font-label);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-muted);
}

.meta, .tag-line {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}

.handwritten {
  font-family: var(--font-hand);
  font-weight: 700;
}

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

/* Links — underline on hover, inherit color by default */
a { color: inherit; text-decoration: none; transition: color var(--dur-base) var(--ease); }
a:hover { color: var(--accent); }

/* Default focus ring — brand grass */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}