/* ==========================================================================
   Source Serif 4 — display family. Loaded from Google Fonts.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");

/* ==========================================================================
   Inter — body family @font-face. Files in fonts/. 18pt optical size for body.
   ========================================================================== */
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-Thin.ttf") format("truetype");           font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-ThinItalic.ttf") format("truetype");     font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-ExtraLight.ttf") format("truetype");     font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-ExtraLightItalic.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-Light.ttf") format("truetype");          font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-LightItalic.ttf") format("truetype");    font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-Regular.ttf") format("truetype");        font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-Italic.ttf") format("truetype");         font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-Medium.ttf") format("truetype");         font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-MediumItalic.ttf") format("truetype");   font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-SemiBold.ttf") format("truetype");       font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-Bold.ttf") format("truetype");           font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-BoldItalic.ttf") format("truetype");     font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-ExtraBold.ttf") format("truetype");      font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-ExtraBoldItalic.ttf") format("truetype");font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-Black.ttf") format("truetype");          font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-BlackItalic.ttf") format("truetype");    font-weight: 900; font-style: italic; font-display: swap; }

/* ==========================================================================
   WorkPage — Design Tokens
   Palette: Prussian Blue · Mint Leaf · Tan · Slate Grey · White
   ========================================================================== */

:root {
  /* Signature gradient — Prussian Blue → Mint Leaf, 135°. */
  --wp-grad-signature: linear-gradient(135deg, #0F172A 0%, #3DBFA0 100%);
  --wp-grad-signature-soft: linear-gradient(135deg, rgba(15,23,42,0.10) 0%, rgba(61,191,160,0.18) 100%);

  /* Mint Leaf — primary brand colour, anchored at #3DBFA0 (500). */
  --wp-mint-50:  #ECFAF5;
  --wp-mint-100: #D2F4E7;
  --wp-mint-200: #A6E9D0;
  --wp-mint-300: #79DEB8;
  --wp-mint-400: #57CDA9;
  --wp-mint-500: #3DBFA0;
  --wp-mint-600: #2FA388;
  --wp-mint-700: #25826D;
  --wp-mint-800: #1B6253;
  --wp-mint-900: #124138;
  --wp-mint-950: #0A2620;

  /* Tan — warm secondary, anchored at #D3B88C (500). */
  --wp-tan-50:  #FAF5EC;
  --wp-tan-100: #F4E9D2;
  --wp-tan-200: #E9D2A6;
  --wp-tan-300: #DEC59C;
  --wp-tan-400: #D9BE94;
  --wp-tan-500: #D3B88C;
  --wp-tan-600: #B89A6F;
  --wp-tan-700: #957B57;
  --wp-tan-800: #715D41;
  --wp-tan-900: #4D3F2C;
  --wp-tan-950: #2A2218;

  /* Legacy aliases — periwinkle was cool brand → now Mint; magenta was warm → now Tan. */
  --wp-periwinkle-50:  var(--wp-mint-50);
  --wp-periwinkle-100: var(--wp-mint-100);
  --wp-periwinkle-200: var(--wp-mint-200);
  --wp-periwinkle-300: var(--wp-mint-300);
  --wp-periwinkle-400: var(--wp-mint-400);
  --wp-periwinkle-500: var(--wp-mint-500);
  --wp-periwinkle-600: var(--wp-mint-600);
  --wp-periwinkle-700: var(--wp-mint-700);

  --wp-magenta-50:  var(--wp-tan-50);
  --wp-magenta-100: var(--wp-tan-100);
  --wp-magenta-200: var(--wp-tan-200);
  --wp-magenta-300: var(--wp-tan-300);
  --wp-magenta-400: var(--wp-tan-500);
  --wp-magenta-500: var(--wp-tan-600);
  --wp-magenta-600: var(--wp-tan-700);

  --wp-teal-50:  var(--wp-mint-50);
  --wp-teal-100: var(--wp-mint-100);
  --wp-teal-300: var(--wp-mint-300);
  --wp-teal-500: var(--wp-mint-500);
  --wp-teal-600: var(--wp-mint-600);
  --wp-teal-700: var(--wp-mint-700);

  --wp-amber-300: var(--wp-tan-300);
  --wp-amber-500: var(--wp-tan-500);
  --wp-amber-600: var(--wp-tan-600);

  --wp-lime: var(--wp-mint-300);

  /* Ink — neutral ramp anchored on Slate Grey (#69747C) and ending at Prussian Blue (#0F172A). */
  --wp-ink-0:    #FFFFFF;
  --wp-ink-50:   #F7F8F9;
  --wp-ink-100:  #EEF0F2;
  --wp-ink-200:  #DCDFE3;
  --wp-ink-300:  #B9BEC4;
  --wp-ink-400:  #8C949B;
  --wp-ink-500:  #69747C;
  --wp-ink-600:  #525B62;
  --wp-ink-700:  #3D444A;
  --wp-ink-800:  #2A2F35;
  --wp-ink-900:  #1A1F26;
  --wp-ink-950:  #0F172A;
  --wp-ink-1000: #07091A;

  --wp-signal-aligned:    #3DBFA0;
  --wp-signal-drifting:   #D3B88C;
  --wp-signal-misaligned: #D8654E;
  --wp-signal-neutral:    #69747C;

  --wp-font-display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --wp-font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --wp-font-mono:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --wp-font-feat-data: "tnum" 1, "ss01" 1, "cv11" 1;

  --wp-text-xs: 12px; --wp-text-sm: 14px; --wp-text-base: 16px; --wp-text-lg: 18px;
  --wp-text-xl: 22px; --wp-text-2xl: 28px; --wp-text-3xl: 36px; --wp-text-4xl: 48px;
  --wp-text-5xl: 64px; --wp-text-6xl: 88px;

  --wp-lh-tight: 1.1; --wp-lh-snug: 1.2; --wp-lh-normal: 1.5; --wp-lh-relaxed: 1.7; --wp-lh-loose: 2.0;
  --wp-track-eyebrow: 0.18em; --wp-track-button: 0.08em; --wp-track-tight: -0.01em;
  --wp-fw-light: 300; --wp-fw-regular: 400; --wp-fw-medium: 500; --wp-fw-semibold: 600; --wp-fw-bold: 700;

  --wp-space-1: 4px; --wp-space-2: 8px; --wp-space-3: 12px; --wp-space-4: 16px;
  --wp-space-5: 24px; --wp-space-6: 32px; --wp-space-7: 42px; --wp-space-8: 64px;
  --wp-space-9: 96px; --wp-space-10: 128px; --wp-space-11: 160px;

  --wp-radius-xs: 6px; --wp-radius-sm: 10px; --wp-radius-md: 16px; --wp-radius-lg: 24px; --wp-radius-pill: 9999px;

  --wp-shadow-card:    -1px 4px 24px -3px rgba(15,23,42,0.16);
  --wp-shadow-card-dk:  1px 4px 24px -3px rgba(255,255,255,0.06);
  --wp-shadow-pop:     0 18px 48px -12px rgba(15,23,42,0.22);
  --wp-shadow-pop-dk:  0 18px 48px -12px rgba(0,0,0,0.6);
  --wp-shadow-glow-magenta: 0 0 32px rgba(211,184,140,0.35), 0 0 12px rgba(211,184,140,0.5);
  --wp-shadow-glow-peri:    0 0 32px rgba(61,191,160,0.35), 0 0 12px rgba(61,191,160,0.5);
  --wp-shadow-glow-mint:    0 0 32px rgba(61,191,160,0.35), 0 0 12px rgba(61,191,160,0.5);
  --wp-shadow-glow-tan:     0 0 32px rgba(211,184,140,0.35), 0 0 12px rgba(211,184,140,0.5);

  --wp-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --wp-ease-emphasis: cubic-bezier(0.2, 0.9, 0.25, 1);
  --wp-dur-fast: 140ms; --wp-dur-normal: 240ms; --wp-dur-slow: 420ms;
}

:root,
.theme-light {
  --bg-page:       var(--wp-ink-0);
  --bg-page-tint:  #FAFBFC;
  --bg-surface:    var(--wp-ink-0);
  --bg-elevated:   var(--wp-ink-0);
  --bg-muted:      var(--wp-ink-100);
  --bg-inverse:    var(--wp-ink-950);

  --border-subtle: var(--wp-ink-200);
  --border-strong: var(--wp-ink-300);
  --border-focus:  var(--wp-mint-500);

  --text-primary:   var(--wp-ink-950);
  --text-secondary: var(--wp-ink-700);
  --text-muted:     var(--wp-ink-500);
  --text-inverse:   var(--wp-ink-0);
  --text-on-brand:  var(--wp-ink-0);

  --action-primary:        var(--wp-mint-500);
  --action-primary-hover:  var(--wp-mint-600);
  --action-primary-text:   var(--wp-ink-0);
  --action-gradient:       linear-gradient(90deg, #3DBFA0 0%, #2FA388 100%);
  --action-gradient-hover: linear-gradient(90deg, #2FA388 0%, #25826D 100%);

  --brand-gradient: var(--wp-grad-signature);
  --brand-peri:     var(--wp-mint-500);
  --brand-magenta:  var(--wp-tan-500);
  --brand-mint:     var(--wp-mint-500);
  --brand-tan:      var(--wp-tan-500);
  --brand-prussian: var(--wp-ink-950);

  --accent-headline: var(--wp-mint-500);

  --shadow-card: var(--wp-shadow-card);
  --shadow-pop:  var(--wp-shadow-pop);
}

.theme-dark {
  --bg-page:      var(--wp-ink-950);   /* Prussian Blue */
  --bg-page-tint: #0B1220;
  --bg-surface:   #141B2C;
  --bg-elevated:  #1A2236;
  --bg-muted:     #25304A;
  --bg-inverse:   var(--wp-ink-0);

  --border-subtle: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --border-focus:  var(--wp-tan-500);

  --text-primary:   var(--wp-ink-0);
  --text-secondary: rgba(255,255,255,0.78);
  --text-muted:     rgba(255,255,255,0.55);
  --text-inverse:   var(--wp-ink-950);
  --text-on-brand:  var(--wp-ink-950);

  --action-primary:        var(--wp-tan-500);
  --action-primary-hover:  var(--wp-tan-400);
  --action-primary-text:   var(--wp-ink-950);
  --action-gradient:       linear-gradient(90deg, #D3B88C 0%, #B89A6F 100%);
  --action-gradient-hover: linear-gradient(90deg, #DEC59C 0%, #D3B88C 100%);

  --brand-gradient: var(--wp-grad-signature);
  --brand-peri:     var(--wp-mint-400);
  --brand-magenta:  var(--wp-tan-400);
  --brand-mint:     var(--wp-mint-400);
  --brand-tan:      var(--wp-tan-400);
  --brand-prussian: var(--wp-ink-950);

  --accent-headline: var(--wp-tan-500);

  --shadow-card: var(--wp-shadow-card-dk);
  --shadow-pop:  var(--wp-shadow-pop-dk);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  font-family: var(--wp-font-body);
  font-size: var(--wp-text-base);
  line-height: var(--wp-lh-relaxed);
  color: var(--text-primary);
  background: var(--bg-page);
  font-weight: var(--wp-fw-light);
  letter-spacing: 0.024em;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wp-font-display);
  font-weight: var(--wp-fw-medium);
  line-height: var(--wp-lh-snug);
  letter-spacing: var(--wp-track-tight);
  margin: 0;
  color: var(--text-primary);
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }