/* ============================================================
   Supa Resume — Webfonts
   Outfit        → display / headings / name / section titles
   DM Sans       → body copy, labels, metadata
   Be Vietnam Pro → badges & small accent labels
   Fonts loaded from Google Fonts (the .fig specifies these three
   exact families). Swap for self-hosted .woff2 if shipping to prod.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Sans:wght@400;500;700&family=Be+Vietnam+Pro:wght@400;500;600&display=swap');

:root {
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-accent: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* ============================================================
   Supa Resume — Color tokens
   Extracted from "Supa Resume - Light & Dark" .fig
   Two themes: light (default :root) and dark ([data-theme="dark"]).
   ============================================================ */
:root {
  /* ---- Neutral ramp (ink) ---- */
  --white:    #ffffff;
  --ink-900:  #232339;  /* strongest headings            rgb(35,35,57)   */
  --ink-800:  #2e2e48;  /* primary dark text / dark card  rgb(46,46,72)  */
  --ink-600:  #47516b;  /* secondary text                 rgb(71,81,107) */
  --ink-500:  #79819a;  /* body / muted text              rgb(121,129,154)*/
  --ink-400:  #acb1c3;  /* faint text, captions           rgb(172,177,195)*/
  --ink-300:  #d9dfe8;  /* quote text, light dividers     rgb(217,223,232)*/
  --ink-200:  #e2e6ee;  /* default border                 rgb(226,230,238)*/
  --ink-100:  #eef1f6;  /* soft border / hairline         rgb(238,241,246)*/
  --ink-050:  #f4f6fb;  /* surface fill                   rgb(244,246,251)*/

  /* ---- Brand accents ---- */
  --blue-500:   #516cf7;  /* primary action / links   rgb(81,108,247)  */
  --blue-300:   #95aafb;  /* soft blue                rgb(149,170,251) */
  --violet-700: #5531a7;  /* deep violet              rgb(85,49,167)   */
  --violet-500: #7b61ff;  /* brand violet / outline   rgb(123,97,255)  */
  --violet-400: #c696fc;  /* lavender accent          rgb(198,150,252) */
  --role-500:   #8b72e8;  /* job-title / role text                   */

  /* ---- Semantic ---- */
  --green-500:    #4ac06f;  /* success                rgb(74,192,111)  */
  --green-600:    #61c454;  /* skill accent           rgb(97,196,84)   */
  --green-bg:     #e7fae5;  /* success badge bg       rgb(231,250,229) */
  --coral-500:    #ee6a5f;  /* coral icon             rgb(238,106,95)  */
  --yellow-500:   #f5bd4f;  /* yellow icon            rgb(245,189,79)  */
  --yellow-icon:  #f4ce10;  /* sun glyph              rgb(244,206,16)  */
  --yellow-bg:    #fefcbf;  /* sun chip bg            rgb(254,252,191) */
  --red-500:      #c7152a;  /* danger                 rgb(199,21,42)   */

  /* ---- Skeuomorphic icon shadows (education / tools tiles) ---- */
  --shadow-coral:  #ec6d62;
  --shadow-yellow: #f5c451;
  --shadow-green:  #68cc58;

  /* ============ Semantic aliases (light) ============ */
  --bg-page:        var(--white);
  --bg-surface:     var(--ink-050);
  --bg-surface-2:   var(--white);
  --bg-inverse:     var(--ink-900);

  --text-heading:   var(--ink-900);
  --text-strong:    var(--ink-800);
  --text-secondary: var(--ink-600);
  --text-body:      var(--ink-500);
  --text-muted:     var(--ink-400);
  --text-faint:     var(--ink-300);
  --text-role:      var(--role-500);
  --text-on-accent: var(--white);

  --border-default: var(--ink-200);
  --border-soft:    var(--ink-100);

  --accent:         var(--blue-500);
  --accent-hover:   #3f57df;
  --accent-soft:    var(--violet-400);
  --link:           var(--blue-500);

  --badge-success-bg:   var(--green-bg);
  --badge-success-text: var(--green-500);

  --avatar-ring: var(--ink-100);
}

/* ============ Dark theme ============ */
[data-theme="dark"] {
  --bg-page:        #232339;
  --bg-surface:     #2e2e48;
  --bg-surface-2:   #2e2e48;
  --bg-inverse:     var(--white);

  --text-heading:   #eef1f6;
  --text-strong:    #eef1f6;
  --text-secondary: #acb1c3;
  --text-body:      #79819a;
  --text-muted:     #79819a;
  --text-faint:     #47516b;
  --text-role:      var(--violet-400);
  --text-on-accent: var(--white);

  --border-default: #3a3a57;
  --border-soft:    #34344f;

  --accent:         var(--blue-500);
  --accent-hover:   #6b82ff;
  --accent-soft:    var(--violet-400);
  --link:           var(--blue-300);

  --badge-success-bg:   #1f5c43;
  --badge-success-text: #c7f5c7;

  --avatar-ring: #3a3a57;
}


/* ============================================================
   Supa Resume — Typography tokens
   Display: Outfit  ·  Body: DM Sans  ·  Accent: Be Vietnam Pro
   Sizes are the real-document scale (the .fig artboard is a
   scaled thumbnail; these are the intended print/screen sizes).
   ============================================================ */
:root {
  /* ---- Font families (also declared in fonts.css) ---- */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-accent: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* ---- Type scale ---- */
  --fs-display: 34px;   /* name on resume                       */
  --fs-h1: 30px;        /* section titles (Experience, Skills)  */
  --fs-h2: 22px;        /* sub-headers / role                   */
  --fs-h3: 18px;        /* card titles                          */
  --fs-lg: 16px;        /* lead body                            */
  --fs-body: 15px;      /* default body                         */
  --fs-sm: 13px;        /* meta, dates, secondary               */
  --fs-xs: 12px;        /* labels, badges                       */
  --fs-2xs: 11px;       /* fine print / captions                */

  /* ---- Line heights ---- */
  --lh-tight: 1.1; /* @kind other */
  --lh-snug: 1.3; /* @kind other */
  --lh-normal: 1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-tight: -0.02em;   /* display & section titles            */
  --ls-normal: 0; /* @kind other */
  --ls-wide: 0.04em;     /* uppercase labels                    */
}

/* ---- Optional helper classes (used by specimen cards) ---- */
.t-display { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-heading); }
.t-h1 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-heading); }
.t-h2 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--text-strong); }
.t-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--text-strong); }
.t-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--text-body); }
.t-sm { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-secondary); }
.t-label { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-xs); line-height: 1; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }
.t-accent { font-family: var(--font-accent); font-weight: var(--fw-medium); font-size: var(--fs-xs); }


/* ============================================================
   Supa Resume — Spacing, radius, shadow & layout tokens
   4px base grid. Shadows are the soft black washes used across
   cards; colored shadows live in colors.css.
   ============================================================ */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 24px;
  --sp-9: 32px;
  --sp-10: 40px;
  --sp-11: 48px;
  --sp-12: 64px;

  /* ---- Radius ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;     /* default card radius                 */
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 100px;
  --r-full: 9999px;

  /* ---- Elevation (soft black washes from the .fig) ---- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.10);
  /* Skeuomorphic app-icon shadow: tight colored glow under tiles */
  --shadow-icon: 0 4px 10px rgba(0,0,0,0.12);

  /* ---- Layout ---- */
  --resume-width: 1180px;
  --aside-width: 320px;
  --page-pad: 40px;
  --section-gap: 48px;
}