/* ============================================================
   PREPT GLOBAL STYLES
   Source: Claude - Prept/Prept-Design-System.zip
   Update this file whenever design-tokens.json is refreshed.
   ============================================================ */

/* ------------------------------------------------------------
   FONT FACES
   ------------------------------------------------------------ */

/* PP Editorial New — Display / Heading */
@font-face { font-family: 'PP Editorial New'; src: url('../../public/fonts/Editorial New/PPEditorialNew-Ultralight.woff2') format('woff2'), url('../../public/fonts/Editorial New/PPEditorialNew-Ultralight.woff') format('woff'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Editorial New'; src: url('../../public/fonts/Editorial New/PPEditorialNew-UltralightItalic.woff2') format('woff2'), url('../../public/fonts/Editorial New/PPEditorialNew-UltralightItalic.woff') format('woff'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'PP Editorial New'; src: url('../../public/fonts/Editorial New/PPEditorialNew-Thin.woff2') format('woff2'), url('../../public/fonts/Editorial New/PPEditorialNew-Thin.woff') format('woff'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Editorial New'; src: url('../../public/fonts/Editorial New/PPEditorialNew-ThinItalic.woff2') format('woff2'), url('../../public/fonts/Editorial New/PPEditorialNew-ThinItalic.woff') format('woff'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'PP Editorial New'; src: url('../../public/fonts/Editorial New/PPEditorialNew-Regular.woff2') format('woff2'), url('../../public/fonts/Editorial New/PPEditorialNew-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Editorial New'; src: url('../../public/fonts/Editorial New/PPEditorialNew-Italic.woff2') format('woff2'), url('../../public/fonts/Editorial New/PPEditorialNew-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'PP Editorial New'; src: url('../../public/fonts/Editorial New/PPEditorialNew-Bold.woff2') format('woff2'), url('../../public/fonts/Editorial New/PPEditorialNew-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Editorial New'; src: url('../../public/fonts/Editorial New/PPEditorialNew-BoldItalic.woff2') format('woff2'), url('../../public/fonts/Editorial New/PPEditorialNew-BoldItalic.woff') format('woff'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'PP Editorial New'; src: url('../../public/fonts/Editorial New/PPEditorialNew-Heavy.woff2') format('woff2'), url('../../public/fonts/Editorial New/PPEditorialNew-Heavy.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Editorial New'; src: url('../../public/fonts/Editorial New/PPEditorialNew-HeavyItalic.woff2') format('woff2'), url('../../public/fonts/Editorial New/PPEditorialNew-HeavyItalic.woff') format('woff'); font-weight: 900; font-style: italic; font-display: swap; }

/* PP Mori — Body / Label / Button */
@font-face { font-family: 'PP Mori'; src: url('../../public/fonts/PP Mori/PPMori-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Mori'; src: url('../../public/fonts/PP Mori/PPMori-Book.woff') format('woff'); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Mori'; src: url('../../public/fonts/PP Mori/PPMori-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Mori'; src: url('../../public/fonts/PP Mori/PPMori-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Mori'; src: url('../../public/fonts/PP Mori/PPMori-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Mori'; src: url('../../public/fonts/PP Mori/PPMori-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Mori'; src: url('../../public/fonts/PP Mori/PPMori-BoldItalic.woff') format('woff'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'PP Mori'; src: url('/fonts/PP Mori/PPMori-ExtraBold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------
   DESIGN TOKENS — CSS CUSTOM PROPERTIES
   ------------------------------------------------------------ */

:root, [data-theme="light"] {

  /* --- Primitive: Primary (Sage Mint) --- */
  --primary-50:  #f0f8f4;
  --primary-100: #daeee6;
  --primary-200: #d0e8df;
  --primary-300: #C2DECE; /* Brand accent */
  --primary-400: #a8cebb;
  --primary-500: #8ab8a0;
  --primary-600: #6a9c82;
  --primary-700: #4d7a62;
  --primary-800: #315a47;
  --primary-900: #193a2d;

  /* --- Primitive: Neutral --- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7faf8;
  --neutral-100: #eff4f2; /* Brand background */
  --neutral-200: #dde6e2;
  --neutral-300: #c2d0cb;
  --neutral-400: #9eb0a9;
  --neutral-500: #738c84;
  --neutral-600: #556860;
  --neutral-700: #3a4d47;
  --neutral-800: #253530;
  --neutral-900: #141f1c;
  --neutral-950: #0a1210;

  /* --- Primitive: Warm (Amber) --- */
  --warm-50:  #fef9ec;
  --warm-100: #fdf0c4;
  --warm-200: #fbe494;
  --warm-300: #f8d45e;
  --warm-400: #f4c22b;
  --warm-500: #e0aa12;
  --warm-600: #b88808;
  --warm-700: #8c6606;
  --warm-800: #5e4204;
  --warm-900: #312202;

  /* --- Primitive: Cool (Slate Blue) --- */
  --cool-50:  #eff1fa;
  --cool-100: #d8ddf4;
  --cool-200: #b3bbec;
  --cool-300: #8a96e0;
  --cool-400: #6270d2;
  --cool-500: #4857c4;
  --cool-600: #3644a8;
  --cool-700: #283388;
  --cool-800: #1b2264;
  --cool-900: #0e1238;

  /* --- Primitive: Stone (Taupe) --- */
  --stone-50:  #f8f6f3;
  --stone-100: #eeebe5;
  --stone-200: #ddd8ce;
  --stone-300: #c4bdb0;
  --stone-400: #a49888;
  --stone-500: #857568;
  --stone-600: #6a5d52;
  --stone-700: #4e4540;
  --stone-800: #332e2a;
  --stone-900: #1a1714;

  /* --- Semantic: Status --- */
  --success-light:   #e8f5ee;
  --success-border:  #86c9a0;
  --success-base:    #1e8a4c;
  --success-dark:    #145c32;
  --warning-light:   #fef7e0;
  --warning-border:  #f0c84a;
  --warning-base:    #d4940a;
  --warning-dark:    #7a5200;
  --error-light:     #fdeef0;
  --error-border:    #f0929c;
  --error-base:      #d12b40;
  --error-dark:      #8a1625;
  --info-light:      #eef1fb;
  --info-border:     #91a0e0;
  --info-base:       #3644a8;
  --info-dark:       #1e2d7a;

  /* --- Theme: Surface --- */
  --surface-background: var(--neutral-100);
  --surface-base:       var(--neutral-0);
  --surface-elevated:   var(--neutral-0);
  --surface-overlay:    #141f1c66;
  --surface-input:      #e4ece8;

  /* --- Theme: Text --- */
  --text-primary:    var(--neutral-900);
  --text-secondary:  var(--neutral-700);
  --text-tertiary:   var(--neutral-600);
  --text-disabled:   var(--neutral-400);
  --text-inverse:    var(--neutral-100);
  --text-on-primary: var(--neutral-800);

  /* --- Theme: Border --- */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-500);
  --border-focus:   var(--cool-500);

  /* --- Spacing (4px base) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* --- Border Radius --- */
  --radius-none: 0px;
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* --- Elevation Shadows --- */
  --shadow-1: 0 1px 3px 0 rgba(15,22,20,0.06), 0 1px 2px 0 rgba(15,22,20,0.04);
  --shadow-2: 0 2px 8px 0 rgba(15,22,20,0.08), 0 1px 4px 0 rgba(15,22,20,0.05);
  --shadow-3: 0 4px 16px 0 rgba(15,22,20,0.10), 0 2px 6px 0 rgba(15,22,20,0.06);
  --shadow-4: 0 8px 24px 0 rgba(15,22,20,0.12), 0 4px 8px 0 rgba(15,22,20,0.08);
  --shadow-5: 0 16px 40px 0 rgba(15,22,20,0.16), 0 8px 16px 0 rgba(15,22,20,0.10);
}

/* --- Dark mode overrides --- */
[data-theme="dark"] {
  --surface-background: #0e1614;
  --surface-base:       #1a2420;
  --surface-elevated:   #243028;
  --surface-overlay:    #00000099;
  --surface-input:      #253028;

  --text-primary:   #eef3f1;
  --text-secondary: #9eb0a9;
  --text-tertiary:  #6a8079;
  --text-disabled:  #3a4d47;

  --border-subtle:  #1e2d29;
  --border-default: #2e4440;
  --border-strong:  #4a6860;
  --border-focus:   #8a96e0;
}

/* ------------------------------------------------------------
   BASE RESET
   ------------------------------------------------------------ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'PP Mori', system-ui, sans-serif;
  font-weight: 350; /* Book */
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--surface-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

ul, ol {
  list-style: none;
}

/* ------------------------------------------------------------
   TYPOGRAPHY UTILITY CLASSES
   ------------------------------------------------------------ */

/* Display */
.display-lg {
  font-family: 'PP Editorial New', serif;
  font-weight: 100;
  font-size: 120px;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.display-md {
  font-family: 'PP Editorial New', serif;
  font-weight: 100;
  font-size: 96px;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.display-sm {
  font-family: 'PP Editorial New', serif;
  font-weight: 200;
  font-size: 72px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* Headings */
.h1 {
  font-family: 'PP Editorial New', serif;
  font-weight: 200;
  font-size: 56px;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: 'PP Editorial New', serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.h3 {
  font-family: 'PP Editorial New', serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.h4 {
  font-family: 'PP Mori', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.h5 {
  font-family: 'PP Mori', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.30;
  letter-spacing: 0em;
}
.h6 {
  font-family: 'PP Mori', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 0.005em;
}

/* Body */
.body-lg {
  font-family: 'PP Mori', sans-serif;
  font-weight: 350;
  font-size: 18px;
  line-height: 1.62;
  letter-spacing: 0em;
}
.body-md {
  font-family: 'PP Mori', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: 1.60;
  letter-spacing: 0em;
}
.body-sm {
  font-family: 'PP Mori', sans-serif;
  font-weight: 350;
  font-size: 14px;
  line-height: 1.57;
  letter-spacing: 0.01em;
}

/* Label */
.label-lg {
  font-family: 'PP Mori', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.40;
  letter-spacing: 0.01em;
}
.label-md {
  font-family: 'PP Mori', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.40;
  letter-spacing: 0.02em;
}
.label-sm {
  font-family: 'PP Mori', sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.36;
  letter-spacing: 0.03em;
}

/* Caption */
.caption-lg {
  font-family: 'PP Mori', sans-serif;
  font-weight: 350;
  font-size: 13px;
  line-height: 1.48;
  letter-spacing: 0.01em;
}
.caption-md {
  font-family: 'PP Mori', sans-serif;
  font-weight: 350;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.025em;
}

/* Overline */
.overline {
  font-family: 'PP Mori', sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.30;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Button */
.btn-text-lg {
  font-family: 'PP Mori', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.btn-text-md {
  font-family: 'PP Mori', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.btn-text-sm {
  font-family: 'PP Mori', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.025em;
}