/* =============================================================
   PROMPT STUDIO — Colors & Type
   Source of truth: PROMPT Brand Manual (35pp)
   ============================================================= */

/* ---------- Poppins (primary) ---------- */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============ COLOR TOKENS ============ */
  /* Primary palette — from Brand Manual 2.3 */
  --prompt-yellow:        #EEE300; /* Titanium Yellow · Pantone 3955 C · the accent */
  --prompt-black:         #14171C; /* Pantone Black 6 C — brand black, NOT pure black */

  /* Secondary palette — grayscale tones */
  --prompt-true-black:    #000000;
  --prompt-charcoal:      #2D333A; /* mid-dark body tone */
  --prompt-gray:          #9D9D9C; /* medium gray, captions & secondary */
  --prompt-light-gray:    #E3E3E3; /* hairlines, dividers, surfaces */
  --prompt-white:         #FFFFFF;

  /* Convenience tints derived from palette (non-manual but harmonious) */
  --prompt-yellow-soft:   #FBF3A3;
  --prompt-yellow-deep:   #C7BE00;
  --prompt-paper:         #F6F6F4; /* off-white page tone */

  /* ============ SEMANTIC TOKENS (light mode default) ============ */
  --bg:            var(--prompt-white);
  --bg-paper:      var(--prompt-paper);
  --bg-inverse:    var(--prompt-black);
  --bg-accent:     var(--prompt-yellow);

  --surface:       var(--prompt-white);
  --surface-muted: var(--prompt-light-gray);
  --surface-sunk:  #F3F3F3;

  --fg:            var(--prompt-black);    /* primary text */
  --fg-1:          var(--prompt-black);    /* titles */
  --fg-2:          var(--prompt-charcoal); /* body */
  --fg-3:          var(--prompt-gray);     /* captions, metadata */
  --fg-on-accent:  var(--prompt-black);    /* yellow always pairs w/ black type */
  --fg-on-inverse: var(--prompt-white);

  --border:        var(--prompt-light-gray);
  --border-strong: var(--prompt-black);
  --border-hair:   rgba(20, 23, 28, 0.12);

  --accent:        var(--prompt-yellow);
  --accent-ink:    var(--prompt-black);

  /* ============ TYPE SYSTEM ============
     Poppins primary. Arial secondary (emails / PPT). */
  --font-primary:   'Poppins', 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
  --font-secondary: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono:      ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Weights the brand explicitly calls out: Light (300) + Semibold (600) */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     900;

  /* Display / heading / body / caption scale
     Architectural tone — big, airy Light headings; tight Semibold labels. */
  --fs-display:    clamp(56px, 7.2vw, 112px);
  --fs-h1:         clamp(40px, 4.8vw, 72px);
  --fs-h2:         clamp(28px, 3.2vw, 48px);
  --fs-h3:         24px;
  --fs-h4:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-micro:      10px; /* numbered section markers, eyebrow labels */

  --lh-tight:      1.02;
  --lh-heading:    1.08;
  --lh-snug:       1.25;
  --lh-body:       1.55;
  --lh-loose:      1.75;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.14em;  /* ALL-CAPS eyebrows */

  /* ============ SPACING / RADII / ELEVATION ============
     The brand is architectural & print-led — radii are small, shadows are rare. */
  --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;

  --radius-0:  0;      /* default — print / sharp */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-bold: 1.5px;

  --shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.06);
  --shadow-md: 0 6px 20px rgba(20, 23, 28, 0.08);
  --shadow-lg: 0 24px 60px rgba(20, 23, 28, 0.14);

  --motion-fast:    120ms;
  --motion-base:    200ms;
  --motion-slow:    420ms;
  --ease-standard:  cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.18, 0.72, 0, 1);

  /* Layout grid — A4 / InDesign heritage */
  --content-max:   1280px;
  --gutter:        var(--space-5);
}

/* ============ SEMANTIC TYPE CLASSES ============
   Use these as drop-in classes or by referencing the CSS vars. */

html, body {
  font-family: var(--font-primary);
  color: var(--fg);
  background: var(--bg);
  font-weight: var(--weight-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.p-display {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.p-h1 {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.p-h2 {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--fg-1);
}
.p-h3 {
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.p-h4 {
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.p-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg-2); font-weight: var(--weight-light); }
.p-body    { font-size: var(--fs-body);    line-height: var(--lh-body); color: var(--fg-2); font-weight: var(--weight-light); }
.p-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--fg-2); font-weight: var(--weight-regular); }

.p-caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  font-weight: var(--weight-regular);
  line-height: var(--lh-snug);
}

/* All-caps eyebrow / section labels — think "1.1 Logotype" from the manual */
.p-eyebrow {
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-1);
}

/* Numbered section marker — "01", "02" style */
.p-marker {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

/* Tagline — italic allowed per manual visuals */
.p-tagline {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--fg-1);
}

/* Utility: highlight a phrase with the yellow underscore/bar treatment */
.p-accent-bar {
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 0.2em no-repeat;
  padding-bottom: 0.02em;
}