/* ============================================================
   PurePep Design System — Colors + Type Foundations
   Parent company: Gyros Protein Technologies (GPT)
   Product family: PurePep synthesizers + PurePep EasyClean (PEC)
   Source of truth: uploads/240106_PUREPEP_STYLEGUIDEv4.pdf
   Voice source: Tone of Voice Guide v1.1, ref D0056362
   ============================================================ */

/* ---------- Fonts (PP Mori — brand typeface) ---------- */
@font-face { font-family: 'PP Mori'; font-weight: 200; font-style: normal;
  src: url('../fonts/PPMori-Extralight.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'PP Mori'; font-weight: 200; font-style: italic;
  src: url('../fonts/PPMori-ExtralightItalic.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'PP Mori'; font-weight: 300; font-style: normal;
  src: url('../fonts/PPMori-Light.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'PP Mori'; font-weight: 400; font-style: normal;
  src: url('../fonts/PPMori-Regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'PP Mori'; font-weight: 400; font-style: italic;
  src: url('../fonts/PPMori-RegularItalic.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'PP Mori'; font-weight: 500; font-style: normal;
  src: url('../fonts/PPMori-Medium.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'PP Mori'; font-weight: 600; font-style: normal;
  src: url('../fonts/PPMori-SemiBold.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'PP Mori'; font-weight: 600; font-style: italic;
  src: url('../fonts/PPMori-SemiBoldItalic.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'PP Mori'; font-weight: 700; font-style: normal;
  src: url('../fonts/PPMori-Bold.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'PP Mori'; font-weight: 800; font-style: normal;
  src: url('../fonts/PPMori-ExtraBold.otf') format('opentype'); font-display: swap; }

/* Serif + mono live on Google Fonts in the source design system, but this app is
   offline-first and uses only PP Mori — the external @import is removed so the app
   stays fully self-contained (no network font call, works offline, no privacy leak).
   The --font-serif / --font-mono tokens below fall back to system fonts if ever used. */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Serif...&display=swap'); */

:root {
  /* ----- Brand Palette (official style guide v4, page 11) -----
     Orange 1 is the primary brand orange. Orange 2 is the bright accent.
     Orange 3 is the deep red-orange used as gradient end and secondary accent.
     The gradient (Orange 1 to Orange 3) is itself a palette item. */
  --pp-orange-1:      #ED6D1E;   /* Orange 1 — primary brand */
  --pp-orange-2:      #FF6C00;   /* Orange 2 — bright accent */
  --pp-orange-3:      #E33820;   /* Orange 3 — gradient end, red accent */

  /* Back-compat aliases */
  --pp-orange:        var(--pp-orange-1);
  --pp-red:           var(--pp-orange-3);

  /* Derived interaction states (not in style guide; reconstructed from Orange 1) */
  --pp-orange-600:    #D55E10;   /* hover / pressed */
  --pp-orange-700:    #B44D0C;   /* deeper text-on-light */
  --pp-orange-100:    #FBDFC8;   /* tinted backgrounds, chips */
  --pp-orange-050:    #FDF2E8;   /* page washes */

  /* Brand gradient — CANONICAL.
     Banner logo bar runs red (Orange 3, left) -> orange (Orange 1, right),
     logo sits on the orange (right) side. */
  --pp-gradient-bar:      linear-gradient(90deg, var(--pp-orange-3) 0%, var(--pp-orange-1) 100%);
  --pp-gradient-vertical: linear-gradient(180deg, var(--pp-orange-3) 0%, var(--pp-orange-1) 100%);

  /* GPT parent accents */
  --gpt-teal:         #4FB8C9;
  --gpt-orange:       #F16A3E;

  /* ----- Neutrals (style guide: Gray #202020 is body; white is dominant) ----- */
  --ink-900:          #202020;   /* body text — style guide p11 */
  --ink-800:          #2B2E33;
  --ink-700:          #3A3E45;
  --ink-600:          #58595B;   /* GPT wordmark grey */
  --ink-500:          #7A7D83;
  --ink-400:          #A4A7AD;
  --ink-300:          #CACCD0;
  --ink-200:          #E4E5E8;
  --ink-150:          #EDEEF0;
  --ink-100:          #F4F5F7;
  --ink-050:          #FAFAFB;
  --ink-000:          #FFFFFF;

  /* ----- Semantic surfaces ----- */
  --bg:               var(--ink-000);
  --bg-muted:         var(--ink-100);
  --bg-inverse:       var(--ink-900);
  --bg-wash:          var(--pp-orange-050);

  --fg:               var(--ink-900);
  --fg-muted:         var(--ink-600);
  --fg-subtle:        var(--ink-500);
  --fg-inverse:       var(--ink-000);
  --fg-accent:        var(--pp-orange-1);
  --fg-link:          var(--pp-orange-700);

  --border:           var(--ink-200);
  --border-strong:    var(--ink-300);
  --border-accent:    var(--pp-orange-1);

  /* ----- Status (lab / regulated UI) ----- */
  --ok:               #2E7D5B;
  --ok-bg:            #E6F3EC;
  --warn:             #B8761F;
  --warn-bg:          #FBEFD6;
  --err:              var(--pp-orange-3);
  --err-bg:           #FBE4E0;
  --info:             #2563A0;
  --info-bg:          #E2ECF6;

  /* ----- Typography — families ----- */
  --font-sans:        'PP Mori', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif:       'Noto Serif', 'Source Serif Pro', Georgia, serif;
  --font-mono:        'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ----- Type scale (1.2 minor-third, tuned for scientific content) ----- */
  --fs-12:  0.75rem;    /* 12 — eyebrow, footnote */
  --fs-13:  0.8125rem;  /* 13 — UI label */
  --fs-14:  0.875rem;   /* 14 — caption, small body */
  --fs-16:  1rem;       /* 16 — body */
  --fs-18:  1.125rem;   /* 18 — lead body, large UI */
  --fs-20:  1.25rem;    /* 20 — sub-head */
  --fs-24:  1.5rem;     /* 24 — h4 / card title */
  --fs-30:  1.875rem;   /* 30 — h3 */
  --fs-36:  2.25rem;    /* 36 — h2 */
  --fs-48:  3rem;       /* 48 — h1 */
  --fs-64:  4rem;       /* 64 — display */
  --fs-88:  5.5rem;     /* 88 — hero display */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.08em;

  --fw-light:    300;   /* PP Mori Light — style guide body/subline */
  --fw-regular:  400;
  --fw-medium:   500;   /* PP Mori Medium — style guide headlines */
  --fw-semibold: 600;
  --fw-bold:     700;   /* PP Mori Bold — style guide CTA accent only */
  --fw-black:    800;

  /* ----- Layout grid (style guide page 7) -----
     The brand grid is 30px x 30px. Apply on templates at 1:1;
     scale proportionally on smaller artifacts (banners). */
  --grid-unit:        30px;
  --grid-margin:      90px;    /* 3 grid cells — headline top + left margin, style guide p13 */
  --grid-logo-size:   60px;    /* logo height — style guide p9 */
  --grid-logo-pad:    60px;    /* logo padding from bar edges — style guide p9 */
  --grid-bar-height:  180px;   /* logo bar = 6 grid cells = 60 pad + 60 logo + 60 pad */

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

  /* ----- Radii ----- */
  --r-0:  0px;
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-pill: 999px;
  --r-circle: 50%;   /* CTA circle — style guide p14 */

  /* ----- CTA (style guide page 14) -----
     Circle. Any palette color or gradient. Text inclination 6°. */
  --cta-rotation: -6deg;   /* text rotates 6° counter-clockwise per style guide */

  /* ----- Elevation / shadows (subtle) ----- */
  --shadow-0:  none;
  --shadow-1:  0 1px 2px rgba(32, 32, 32, 0.06),
               0 0 0 1px rgba(32, 32, 32, 0.05);
  --shadow-2:  0 2px 6px rgba(32, 32, 32, 0.08),
               0 0 0 1px rgba(32, 32, 32, 0.06);
  --shadow-3:  0 8px 24px rgba(32, 32, 32, 0.10),
               0 0 0 1px rgba(32, 32, 32, 0.06);
  --shadow-focus: 0 0 0 3px rgba(237, 109, 30, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.4);

  /* ----- Motion ----- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;

  /* ----- Layout ----- */
  --container:    1200px;
  --container-lg: 1360px;
  --gutter:       var(--sp-6);
}

/* ============================================================
   Semantic typography — use these in components, not raw vars
   Headlines per style guide: PP Mori Medium. Body: PP Mori Light.
   Bold is reserved for accents (CTA); do not use as default heading weight.
   ============================================================ */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-light);    /* body = PP Mori Light per style guide */
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);    /* style guide p12: headline typeface = PP Mori Medium */
  font-size: var(--fs-88);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0 0 var(--sp-4);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
  margin: 0 0 var(--sp-3);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--sp-2);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2);
}

.subline {
  /* Style guide p12: subline and body = PP Mori Light */
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-18);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--pp-orange-1);
}

.lead {
  font-weight: var(--fw-light);
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  text-wrap: pretty;
}

p, .body {
  font-weight: var(--fw-light);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
  text-wrap: pretty;
}

.caption {
  font-weight: var(--fw-light);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.label {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--ink-100);
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
}

blockquote {
  font-family: var(--font-serif);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-style: italic;
  color: var(--fg);
  border-left: 3px solid var(--pp-orange-1);
  padding-left: var(--sp-5);
  margin: var(--sp-6) 0;
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--pp-orange-1); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-8) 0;
}

::selection { background: var(--pp-orange-1); color: var(--ink-000); }

/* ============================================================
   Brand gradient bar — the canonical PurePep "logo bar"
   Red (Orange 3, left) -> Orange (Orange 1, right).
   Logo sits on the orange/right side, 60px from right/top/bottom edges.
   Height defaults to 6 grid cells (180px); scale proportionally on banners.
   ============================================================ */
.pp-logo-bar {
  background: var(--pp-gradient-bar);
  height: var(--grid-bar-height);
  position: relative;
  width: 100%;
}
.pp-logo-bar--vertical { background: var(--pp-gradient-vertical); }
.pp-logo-bar__logo {
  position: absolute;
  right: var(--grid-logo-pad);
  top: 50%;
  transform: translateY(-50%);
  height: var(--grid-logo-size);
  width: auto;
}

/* ============================================================
   Halftone motif (style guide p15-16)
   Usable as background fade, behind logo, or framing visual.
   NOT used inside the logo bar — the logo bar carries the gradient instead.
   ============================================================ */
.bg-halftone-orange {
  background-image: url('../assets/halftone-orange.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
}
.bg-halftone-red {
  background-image: url('../assets/halftone-red.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
}

/* ============================================================
   CTA circle (style guide page 14)
   Simple circle, 6° text inclination, any palette color or gradient.
   ============================================================ */
.pp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-circle);
  aspect-ratio: 1 / 1;
  text-align: center;
  text-decoration: none;
  padding: 0.75em;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out);
}
.pp-cta > span { display: block; transform: rotate(var(--cta-rotation)); }
.pp-cta:hover  { filter: brightness(1.08); }
.pp-cta:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.pp-cta--black    { background: var(--ink-900);    color: var(--ink-000); }
.pp-cta--white    { background: var(--ink-000);    color: var(--ink-900); }
.pp-cta--orange   { background: var(--pp-orange-1); color: var(--ink-000); }
.pp-cta--gradient { background: var(--pp-gradient-bar); color: var(--ink-000); }