/* =========================================================================
   Carbon Portfolio Design System — Color & Type tokens
   Accent primary: #FFC341
   Based on IBM Carbon v11 token system, adapted for a personal portfolio.
   ========================================================================= */

/* ---------- Fonts (self-hosted IBM Plex) ---------- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/IBMPlexSerif-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
}

/* Google Fonts fallback (keeps preview cards rendering even before fonts/ is populated) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Serif:wght@400;600&display=swap');

:root {
  /* =====================================================================
     COLOR PRIMITIVES — Carbon gray + support colors
     ===================================================================== */
  --gray-10:  #f4f4f4;
  --gray-20:  #e0e0e0;
  --gray-30:  #c6c6c6;
  --gray-40:  #a8a8a8;
  --gray-50:  #8d8d8d;
  --gray-60:  #6f6f6f;
  --gray-70:  #525252;
  --gray-80:  #393939;
  --gray-90:  #262626;
  --gray-100: #161616;
  --white:    #ffffff;
  --black:    #000000;

  /* Custom primary accent — replaces Carbon's blue-60 interactive */
  --accent-10:  #fff8e6;
  --accent-20:  #ffeab3;
  --accent-30:  #ffdc80;
  --accent-40:  #ffd066;
  --accent-50:  #ffc341;  /* PRIMARY */
  --accent-60:  #e6ae2d;
  --accent-70:  #b8871c;
  --accent-80:  #8a6213;
  --accent-90:  #5c4008;

  /* Support (status) colors — Carbon stock */
  --green-50:    #24a148;
  --green-60:    #198038;
  --red-60:      #da1e28;
  --red-70:      #b81921;
  --blue-60:     #0043ce;
  --yellow-30:   #f1c21b;

  /* =====================================================================
     SEMANTIC TOKENS — White theme (light, default)
     ===================================================================== */
  /* Foreground */
  --text-primary:       var(--gray-100);
  --text-secondary:     var(--gray-70);
  --text-placeholder:   var(--gray-50);
  --text-helper:        var(--gray-60);
  --text-on-color:      var(--white);
  --text-inverse:       var(--white);
  --text-disabled:      rgba(22, 22, 22, 0.25);
  --text-error:         var(--red-60);
  --text-accent:        var(--accent-70);   /* links on light bg — accessible */

  /* Short aliases (fg1, fg2) for convenience */
  --fg1: var(--text-primary);
  --fg2: var(--text-secondary);
  --fg3: var(--text-helper);
  --fg-disabled: var(--text-disabled);

  /* Background (layers) */
  --bg-page:            var(--white);
  --bg-layer-1:         var(--gray-10);
  --bg-layer-2:         var(--gray-20);
  --bg-inverse:         var(--gray-100);
  --bg-accent:          var(--accent-50);
  --bg-accent-subtle:   var(--accent-10);

  /* Short aliases */
  --bg1: var(--bg-page);
  --bg2: var(--bg-layer-1);
  --bg3: var(--bg-layer-2);

  /* Border */
  --border-subtle:      var(--gray-20);
  --border-strong:      var(--gray-30);
  --border-emphasis:    var(--gray-100);
  --border-accent:      var(--accent-50);

  /* Interactive */
  --interactive:            var(--gray-100);
  --interactive-hover:      var(--gray-80);
  --interactive-active:     var(--black);
  --interactive-secondary:  var(--gray-70);
  --interactive-disabled:   var(--gray-30);

  /* Focus ring — the one place the accent is mandatory */
  --focus: var(--accent-50);
  --focus-outline: 2px solid var(--accent-50);
  --focus-offset: 2px;

  /* Status */
  --support-success: var(--green-50);
  --support-error:   var(--red-60);
  --support-warning: var(--yellow-30);
  --support-info:    var(--blue-60);

  /* =====================================================================
     SPACING — Carbon scale (4px base)
     ===================================================================== */
  --spacing-01: 0.125rem; /*  2px */
  --spacing-02: 0.25rem;  /*  4px */
  --spacing-03: 0.5rem;   /*  8px */
  --spacing-04: 0.75rem;  /* 12px */
  --spacing-05: 1rem;     /* 16px */
  --spacing-06: 1.5rem;   /* 24px */
  --spacing-07: 2rem;     /* 32px */
  --spacing-08: 2.5rem;   /* 40px */
  --spacing-09: 3rem;     /* 48px */
  --spacing-10: 4rem;     /* 64px */
  --spacing-11: 5rem;     /* 80px */
  --spacing-12: 6rem;     /* 96px */
  --spacing-13: 10rem;    /* 160px */

  /* =====================================================================
     BORDER RADIUS — Zero, always. Provided for any component that truly needs
     a rounded meter/progress bar. Default UI does NOT round.
     ===================================================================== */
  --radius-none: 0;
  --radius-pill: 9999px; /* only for progress bars / tags — use sparingly */

  /* =====================================================================
     SHADOWS — used sparingly; cards do NOT use shadow
     ===================================================================== */
  --shadow-none:    none;
  --shadow-overlay: 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-menu:    0 2px 6px rgba(0, 0, 0, 0.12);
  --shadow-tooltip: 0 2px 6px rgba(0, 0, 0, 0.2);

  /* =====================================================================
     MOTION — Carbon's productive easing
     ===================================================================== */
  --duration-fast-01: 70ms;
  --duration-fast-02: 110ms;
  --duration-moderate-01: 150ms;
  --duration-moderate-02: 240ms;
  --duration-slow-01: 400ms;
  --duration-slow-02: 700ms;
  --ease-productive-enter: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-productive-exit:  cubic-bezier(0.2, 0, 1, 0.9);
  --ease-expressive-enter: cubic-bezier(0.4, 0.14, 0.3, 1);
  --ease-expressive-exit:  cubic-bezier(0.4, 0.14, 1, 1);

  /* =====================================================================
     TYPE — families & tokens
     ===================================================================== */
  --font-sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, Times, serif;
  --font-mono:  'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', Consolas, monospace;

  /* --- Carbon productive headings (fixed) --- */
  --heading-01-size: 0.875rem;  /* 14px */
  --heading-01-lh:   1.125rem;
  --heading-01-weight: 600;
  --heading-01-letter: 0.16px;

  --heading-02-size: 1rem;      /* 16px */
  --heading-02-lh:   1.5rem;
  --heading-02-weight: 600;
  --heading-02-letter: 0;

  --heading-03-size: 1.25rem;   /* 20px */
  --heading-03-lh:   1.75rem;
  --heading-03-weight: 400;
  --heading-03-letter: 0;

  --heading-04-size: 1.75rem;   /* 28px */
  --heading-04-lh:   2.25rem;
  --heading-04-weight: 400;

  --heading-05-size: 2rem;      /* 32px */
  --heading-05-lh:   2.5rem;
  --heading-05-weight: 400;

  --heading-06-size: 2.625rem;  /* 42px */
  --heading-06-lh:   3.125rem;
  --heading-06-weight: 300;

  --heading-07-size: 3.375rem;  /* 54px */
  --heading-07-lh:   4rem;
  --heading-07-weight: 300;

  /* --- Display (expressive, huge) --- */
  --display-01-size: 4.25rem;   /* 68px */
  --display-01-lh:   4.75rem;
  --display-01-weight: 300;

  --display-02-size: 5.75rem;   /* 92px */
  --display-02-lh:   6.25rem;
  --display-02-weight: 300;

  /* --- Body --- */
  --body-compact-01-size: 0.875rem; /* 14px */
  --body-compact-01-lh:   1.125rem;
  --body-compact-01-letter: 0.16px;

  --body-compact-02-size: 1rem;     /* 16px */
  --body-compact-02-lh:   1.375rem;

  --body-01-size: 0.875rem;
  --body-01-lh:   1.25rem;
  --body-01-letter: 0.16px;

  --body-02-size: 1rem;
  --body-02-lh:   1.5rem;

  /* --- Utility --- */
  --label-01-size: 0.75rem;     /* 12px */
  --label-01-lh:   1rem;
  --label-01-letter: 0.32px;

  --label-02-size: 0.875rem;
  --label-02-lh:   1.125rem;
  --label-02-letter: 0.16px;

  --helper-01-size: 0.75rem;
  --helper-01-lh:   1rem;
  --helper-01-letter: 0.32px;

  --code-01-size: 0.75rem;
  --code-01-lh:   1rem;
  --code-01-letter: 0.32px;

  --code-02-size: 0.875rem;
  --code-02-lh:   1.25rem;
  --code-02-letter: 0.32px;

  /* Legacy aliases (p, h1, h2 etc) for quick styling */
}

/* =====================================================================
   DARK THEME — Gray 100 (Carbon g100)
   Apply by setting [data-theme="dark"] on <html> or a scoped ancestor.
   ===================================================================== */
[data-theme="dark"] {
  --text-primary:     var(--gray-10);
  --text-secondary:   #c6c6c6;
  --text-placeholder: #6f6f6f;
  --text-helper:      #a8a8a8;
  --text-on-color:    var(--white);
  --text-inverse:     var(--gray-100);
  --text-disabled:    rgba(244, 244, 244, 0.25);
  --text-accent:      var(--accent-40);

  --fg1: var(--text-primary);
  --fg2: var(--text-secondary);
  --fg3: var(--text-helper);

  --bg-page:    var(--gray-100);
  --bg-layer-1: var(--gray-90);
  --bg-layer-2: var(--gray-80);
  --bg-inverse: var(--gray-10);
  --bg-accent-subtle: #332500;

  --bg1: var(--bg-page);
  --bg2: var(--bg-layer-1);
  --bg3: var(--bg-layer-2);

  --border-subtle:   var(--gray-80);
  --border-strong:   var(--gray-70);
  --border-emphasis: var(--gray-10);

  --interactive:          var(--gray-10);
  --interactive-hover:    var(--gray-30);
  --interactive-active:   var(--white);
  --interactive-disabled: var(--gray-70);
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES — apply immediately with no class
   ===================================================================== */
html, body {
  font-family: var(--font-sans);
  color: var(--fg1);
  background: var(--bg-page);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

/* Headings — default to fixed/productive */
h1 {
  font-family: var(--font-sans);
  font-size: var(--heading-07-size);
  line-height: var(--heading-07-lh);
  font-weight: var(--heading-07-weight);
  letter-spacing: -0.32px;
  margin: 0 0 var(--spacing-06);
}
h2 {
  font-family: var(--font-sans);
  font-size: var(--heading-05-size);
  line-height: var(--heading-05-lh);
  font-weight: var(--heading-05-weight);
  margin: 0 0 var(--spacing-05);
}
h3 {
  font-family: var(--font-sans);
  font-size: var(--heading-04-size);
  line-height: var(--heading-04-lh);
  font-weight: var(--heading-04-weight);
  margin: 0 0 var(--spacing-05);
}
h4 {
  font-family: var(--font-sans);
  font-size: var(--heading-03-size);
  line-height: var(--heading-03-lh);
  font-weight: var(--heading-03-weight);
  margin: 0 0 var(--spacing-04);
}
h5 {
  font-family: var(--font-sans);
  font-size: var(--heading-02-size);
  line-height: var(--heading-02-lh);
  font-weight: var(--heading-02-weight);
  margin: 0 0 var(--spacing-03);
}
h6 {
  font-family: var(--font-sans);
  font-size: var(--heading-01-size);
  line-height: var(--heading-01-lh);
  font-weight: var(--heading-01-weight);
  letter-spacing: var(--heading-01-letter);
  margin: 0 0 var(--spacing-03);
}
p {
  font-family: var(--font-sans);
  font-size: var(--body-02-size);
  line-height: var(--body-02-lh);
  margin: 0 0 var(--spacing-05);
  color: var(--fg1);
}
small, .helper {
  font-size: var(--helper-01-size);
  line-height: var(--helper-01-lh);
  letter-spacing: var(--helper-01-letter);
  color: var(--fg3);
}
code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--code-02-size);
  line-height: var(--code-02-lh);
  letter-spacing: var(--code-02-letter);
}

/* Links — color stays, underline animates in */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast-02) var(--ease-productive-enter);
}
a:hover {
  border-bottom-color: var(--accent-50);
}
a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-bottom-color: transparent;
}

/* Eyebrow label — uppercase Plex Mono */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--label-01-size);
  line-height: var(--label-01-lh);
  letter-spacing: var(--label-01-letter);
  text-transform: uppercase;
  color: var(--fg2);
}

/* Highlight — the accent's happiest home */
mark, .mark {
  background: var(--accent-50);
  color: var(--gray-100);
  padding: 0 0.125rem;
}

/* Selection */
::selection { background: var(--accent-50); color: var(--gray-100); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}