/* ============================================================
   Diligent Portfolio — Design System Tokens
   Triadic palette: Marigold (primary) · Magenta (accent) · Teal (highlight)
   ============================================================ */

:root {
  /* ---------- COLOR · NEUTRALS (warm gray) ---------- */
  --paper:        #FFFFFF;
  --paper-sunk:   #FAFAF7;   /* off-white surface for sectioned blocks */
  --ink:          #15110D;   /* near-black with warm bias */
  --ink-2:        #2A2520;
  --ink-3:        #4A4138;

  --neutral-50:   #FAFAF7;
  --neutral-100:  #F4F2EC;
  --neutral-200:  #E8E4DA;
  --neutral-300:  #D6D0C2;
  --neutral-400:  #B5AD9C;
  --neutral-500:  #8A8273;
  --neutral-600:  #635C50;
  --neutral-700:  #4A4138;
  --neutral-800:  #2E2922;
  --neutral-900:  #1A1611;
  --neutral-950:  #0D0B08;

  /* ---------- COLOR · MARIGOLD (primary, ~40°) ---------- */
  --marigold-50:  #FEF8EC;
  --marigold-100: #FCEFCD;
  --marigold-200: #F9DD96;
  --marigold-300: #F5C65B;
  --marigold-400: #F1B232;
  --marigold-500: #E89A14;   /* core */
  --marigold-600: #C77A0C;
  --marigold-700: #9F5C0E;
  --marigold-800: #7C4811;
  --marigold-900: #663C12;
  --marigold-950: #3A2007;

  /* AA-compliant text & UI */
  --marigold-text:    #7C4811;   /* on paper, AA */
  --accent-text:      #C34242;   /* brand red-orange for eyebrows, chips, tags and icons */
  --orange-text:      var(--accent-text);   /* deprecated alias: use --accent-text */
  --marigold-text-on: #15110D;   /* on marigold-300/400, AA */
  --marigold-ui:      #E89A14;
  --marigold-ui-hover:#C77A0C;
  --marigold-ui-active:#9F5C0E;

  /* ---------- COLOR · MAGENTA (accent, ~330°) ---------- */
  --magenta-50:   #FDF1F7;
  --magenta-100:  #FBDDEB;
  --magenta-200:  #F7B9D6;
  --magenta-300:  #F08AB7;
  --magenta-400:  #E45A93;
  --magenta-500:  #CE3473;   /* core */
  --magenta-600:  #B01E5C;
  --magenta-700:  #8C174A;
  --magenta-800:  #6E153D;
  --magenta-900:  #5A1434;
  --magenta-950:  #340919;

  --magenta-text:    #8C174A;
  --magenta-text-on: #FFFFFF;
  --magenta-ui:      #CE3473;
  --magenta-ui-hover:#B01E5C;
  --magenta-ui-active:#8C174A;

  /* ---------- COLOR · TEAL (highlight, ~190°) ---------- */
  --teal-50:      #ECF8F8;
  --teal-100:     #CDEFEF;
  --teal-200:     #97DCDD;
  --teal-300:     #5EC4C7;
  --teal-400:     #30A8AC;
  --teal-500:     #128A8E;   /* core */
  --teal-600:     #0D7074;
  --teal-700:     #0F5A5D;
  --teal-800:     #114849;
  --teal-900:     #0F3A3B;
  --teal-950:     #06201F;

  --teal-text:    #0F5A5D;
  --teal-text-on: #FFFFFF;
  --teal-ui:      #128A8E;
  --teal-ui-hover:#0D7074;
  --teal-ui-active:#0F5A5D;

  /* ---------- COLOR · SEMANTIC (harmonised w/ triad) ---------- */
  --success:      #2E8B6B;   /* teal-shifted green */
  --success-bg:   #E6F3ED;
  --warning:      #C77A0C;   /* marigold-600 */
  --warning-bg:   #FCEFCD;
  --error:        #B01E5C;   /* magenta-600 */
  --error-bg:     #FBDDEB;
  --info:         #2E6FB0;   /* teal-shifted blue */
  --info-bg:      #E4EEF8;

  /* ---------- TYPE ---------- */
  --font-display: "Syne", "Times New Roman", serif;
  --font-body:    "Outfit", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale — fixed, matches the defined Figma text styles (Auto line-height) */
  --fs-display:   64px;
  --fs-h1:        48px;
  --fs-h2:        36px;
  --fs-h3:        28px;
  --fs-h4:        24px;
  --fs-h5:        20px;
  --fs-h6:        18px;
  --fs-body-l:    18px;
  --fs-body-m:    16px;
  --fs-body-s:    14px;
  --fs-caption:   13px;
  --fs-label:     12px;
  --fs-mono:      14px;

  /* Line heights */
  --lh-tight:     1.02;
  --lh-snug:      1.15;
  --lh-normal:    1.4;
  --lh-relaxed:   1.6;
  --lh-loose:     1.75;

  /* Tracking */
  --ls-tight:     -0.04em;
  --ls-snug:      -0.02em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-wider:     0.08em;
  --ls-widest:    0.16em;

  /* ---------- SPACING (4px base) ---------- */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-7:   32px;
  --s-8:   40px;
  --s-9:   48px;
  --s-10:  64px;
  --s-11:  80px;
  --s-12:  96px;
  --s-13:  128px;
  --s-14:  160px;

  /* ---------- RADII ---------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill:999px;

  /* ---------- SHADOWS (soft, layered) ---------- */
  --shadow-xs: 0 1px 2px rgba(21,17,13,0.04), 0 1px 1px rgba(21,17,13,0.03);
  --shadow-sm: 0 2px 4px rgba(21,17,13,0.04), 0 1px 2px rgba(21,17,13,0.04), 0 0 0 1px rgba(21,17,13,0.02);
  --shadow-md: 0 4px 12px rgba(21,17,13,0.05), 0 2px 4px rgba(21,17,13,0.04), 0 0 0 1px rgba(21,17,13,0.03);
  --shadow-lg: 0 12px 32px rgba(21,17,13,0.07), 0 4px 8px rgba(21,17,13,0.05), 0 0 0 1px rgba(21,17,13,0.03);
  --shadow-xl: 0 24px 56px rgba(21,17,13,0.10), 0 8px 16px rgba(21,17,13,0.06), 0 0 0 1px rgba(21,17,13,0.03);
  --shadow-color-marigold: 0 12px 32px rgba(232,154,20,0.20), 0 4px 8px rgba(232,154,20,0.12);
  --shadow-color-magenta:  0 12px 32px rgba(206,52,115,0.20), 0 4px 8px rgba(206,52,115,0.12);
  --shadow-color-teal:     0 12px 32px rgba(18,138,142,0.20), 0 4px 8px rgba(18,138,142,0.12);

  /* ---------- MOTION ---------- */
  --dur-fast:   150ms;
  --dur-base:   240ms;
  --dur-slow:   400ms;
  --dur-slower: 640ms;

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);     /* gentle decel */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* slight overshoot */
  --ease-snap:    cubic-bezier(0.5, 0, 0, 1);         /* sharp finish */

  /* ---------- GRADIENTS ---------- */
  --grad-sunset:   linear-gradient(135deg, #F1B232 0%, #E45A93 100%);
  --grad-aurora:   linear-gradient(135deg, #128A8E 0%, #CE3473 60%, #F1B232 100%);
  --grad-meadow:   linear-gradient(135deg, #5EC4C7 0%, #F5C65B 100%);
  --grad-ember:    radial-gradient(120% 80% at 20% 0%, #F9DD96 0%, #F08AB7 70%, #FBDDEB 100%);
  --grad-section:  linear-gradient(180deg, #FFFFFF 0%, #FAFAF7 100%);
  --grad-sectionWarm: linear-gradient(180deg, #FFFFFF 0%, #FEF8EC 100%);
}

/* Mobile downscale — the fixed scale shrinks its largest sizes on small screens */
@media (max-width: 600px) {
  :root {
    --fs-display: 40px;
    --fs-h1:      34px;
    --fs-h2:      28px;
    --fs-h3:      24px;
  }
}

/* ---------- BASELINE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--marigold-200); color: var(--ink); }

/* Grain texture as a CSS variable backdrop (utility class) */
.grain {
  position: relative;
  isolation: isolate;
}
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}