/* ==========================================================================
   Pyn Design System — Colors & Type
   Editorial × Futurist × Human
   ========================================================================== */

/* --- Fonts ------------------------------------------------------------- */

@font-face {
  font-family: "Domaine Display Narrow";
  src: url("assets/fonts/DomaineDisplayNarrow-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Domaine Display Narrow";
  src: url("assets/fonts/DomaineDisplayNarrow-Semibold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Beausite Classic";
  src: url("assets/fonts/BeausiteClassic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Beausite Classic";
  src: url("assets/fonts/BeausiteClassic-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Beausite Classic";
  src: url("assets/fonts/BeausiteClassic-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Beausite Classic";
  src: url("assets/fonts/BeausiteClassic-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------ */
  /* Type families                                                       */
  /* ------------------------------------------------------------------ */
  --font-display:  "Domaine Display Narrow", "Playfair Display", Georgia, serif;
  --font-sans:     "Beausite Classic", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, monospace;

  /* ------------------------------------------------------------------ */
  /* Core neutrals (the editorial scaffolding)                           */
  /* ------------------------------------------------------------------ */
  --ink:           rgb(0, 0, 0);        /* primary black — masthead ink */
  --ink-2:         rgb(23, 39, 20);     /* dark forest — body copy on cream */
  --ink-3:         rgb(11, 11, 11);     /* near-black — sections */
  --paper:         rgb(255, 255, 255);  /* clean white */
  --paper-2:       rgb(252, 253, 248);  /* warm paper */
  --paper-3:       rgb(250, 249, 247);  /* bone */
  --paper-4:       rgb(244, 213, 228);  /* blush — soft background */

  /* ------------------------------------------------------------------ */
  /* Accent colors — "use ONE at a time, paired with black or white"     */
  /* ------------------------------------------------------------------ */
  --accent-orange:   rgb(235, 131, 85);    /* brand orange (primary warm) */
  --accent-orange-2: rgb(237, 153, 95);    /* softer orange */
  --accent-rust:     rgb(201, 120, 43);    /* deep rust */
  --accent-red:      rgb(236, 74, 48);     /* editorial red */
  --accent-pink:     rgb(244, 141, 195);   /* hot pink */
  --accent-blush:    rgb(239, 194, 206);   /* dusty blush */
  --accent-blush-2:  rgb(239, 196, 210);   /* pale blush */
  --accent-lilac:    rgb(174, 163, 203);   /* dusty lilac */
  --accent-periwinkle:rgb(150, 170, 246);  /* periwinkle blue */
  --accent-violet:   rgb(133, 62, 230);    /* electric violet */
  --accent-sage:     rgb(162, 218, 182);   /* sage green */
  --accent-green:    rgb(95, 170, 88);     /* grass green */
  --accent-acid:     rgb(206, 209, 28);    /* acid yellow-green */
  --accent-rose:     rgb(199, 131, 190);   /* rose mauve */
  --accent-taupe:    rgb(185, 149, 142);   /* warm taupe */

  /* ------------------------------------------------------------------ */
  /* Semantic tokens                                                     */
  /* ------------------------------------------------------------------ */
  --bg:              var(--paper-2);
  --bg-inverse:      var(--ink);
  --surface:         var(--paper);
  --surface-warm:    var(--paper-3);
  --surface-soft:    var(--paper-4);

  --fg:              var(--ink);
  --fg-inverse:      var(--paper);
  --fg-muted:        rgba(0, 0, 0, 0.60);
  --fg-subtle:       rgba(0, 0, 0, 0.40);
  --fg-on-inverse:   var(--paper);
  --fg-on-inverse-muted: rgba(255, 255, 255, 0.60);

  --hairline:        rgba(0, 0, 0, 1);
  --hairline-soft:   rgba(0, 0, 0, 0.12);
  --hairline-inverse:rgba(255, 255, 255, 0.20);

  /* ------------------------------------------------------------------ */
  /* Gradients — soft, shifting, "oasis-like"                            */
  /* Filled into shape-system; never on flat UI backgrounds.             */
  /* ------------------------------------------------------------------ */
  --gradient-sunset: linear-gradient(180deg,
    rgb(249,124,30) 0%, rgb(244,112,191) 23%, rgb(244,108,182) 37%,
    rgb(244,96,154) 41%, rgb(244,87,132) 43%, rgb(245,76,104) 45%,
    rgb(245,62,72) 46%, rgb(245,47,36) 47%, rgb(245,40,19) 48%,
    rgb(231,66,27) 58%, rgb(201,120,43) 82%, rgb(105,34,19) 100%);

  --gradient-prism: linear-gradient(180deg,
    rgb(162,218,182) 0%, rgb(239,196,210) 11%, rgb(239,194,206) 24%,
    rgb(235,131,85) 43%, rgb(236,74,48) 60%, rgb(133,62,230) 100%);

  --gradient-dusk: linear-gradient(180deg,
    rgb(199,131,190) 0%, rgb(201,120,43) 23%, rgb(200,120,52) 37%,
    rgb(198,119,80) 42%, rgb(194,118,130) 46%, rgb(190,116,183) 48%,
    rgb(95,113,171) 69%, rgb(41,112,164) 82%, rgb(59,56,157) 100%);

  --gradient-bloom: linear-gradient(180deg,
    rgb(255,255,255) 2%, rgb(244,213,228) 22%, rgb(206,209,28) 93%);

  --gradient-warmth: linear-gradient(180deg,
    rgb(244,213,228) 0%, rgb(235,131,85) 60%, rgb(201,120,43) 100%);

  /* ------------------------------------------------------------------ */
  /* Spacing — editorial rhythm (8-based with a 4px half step)           */
  /* ------------------------------------------------------------------ */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ------------------------------------------------------------------ */
  /* Radii — editorial = hairline or capsule, rarely anything in between */
  /* ------------------------------------------------------------------ */
  --radius-0:   0px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 9999px;

  /* ------------------------------------------------------------------ */
  /* Shadows — used sparingly; keep everything flat & printed-feeling    */
  /* ------------------------------------------------------------------ */
  --shadow-print: 0 1px 0 rgba(0,0,0,0.08);
  --shadow-soft:  0 6px 24px -8px rgba(0,0,0,0.12);
  --shadow-lift:  0 24px 48px -16px rgba(0,0,0,0.18);

  /* ------------------------------------------------------------------ */
  /* Motion                                                              */
  /* ------------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-med:  280ms;
  --dur-slow: 520ms;

  /* ------------------------------------------------------------------ */
  /* Type scale (semantic)                                               */
  /* ------------------------------------------------------------------ */
  --size-overline: 12px;
  --size-caption:  13px;
  --size-body-sm:  14px;
  --size-body:     16px;
  --size-body-lg:  18px;
  --size-lead:     22px;
  --size-h6:       20px;
  --size-h5:       28px;
  --size-h4:       38px;
  --size-h3:       54px;
  --size-h2:       72px;
  --size-h1:       120px;
  --size-display:  160px;
}

/* --- Element defaults -------------------------------------------------- */

html { color: var(--fg); background: var(--bg); }
body {
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.92;
  text-wrap: balance;
  margin: 0;
}
h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0;
}
h6 {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  margin: 0;
}

h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
h4 { font-size: var(--size-h4); }
h5 { font-size: var(--size-h5); }
h6 { font-size: var(--size-h6); }

.display {
  font-family: var(--font-display);
  font-size: var(--size-display);
  line-height: 0.89;
  letter-spacing: -0.02em;
}

.lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--size-lead);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.eyebrow, .overline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-overline);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

p { margin: 0 0 1em; text-wrap: pretty; }

small, .caption {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--size-caption);
  line-height: 1.5;
  color: var(--fg-muted);
}

a { color: inherit; text-underline-offset: 0.2em; }

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--space-6) 0;
}