/* =========================================================================
   Noah ED — colors & type tokens
   Source of truth: Figma "SG ED.fig" / Page-1 / For-Claude-Penny
   Brand: Noah (part of the Ordinary Folk group of healthcare brands)
   ========================================================================= */

/* ---------- Font face: real PP Pangram Sans Compact (Pangram Pangram) -----
   Brand font files supplied by Noah and stored in /fonts/.
   Three weights: Regular 400, Medium 500, Semibold 600. */
@font-face {
  font-family: "PP Pangram Sans Compact";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/PPPangramSans-CompactRegular.otf") format("opentype");
}
@font-face {
  font-family: "PP Pangram Sans Compact";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/PPPangramSans-CompactMedium.otf") format("opentype");
}
@font-face {
  font-family: "PP Pangram Sans Compact";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/PPPangramSans-CompactSemibold.otf") format("opentype");
}
@font-face {
  /* Map weight 700 to Semibold — the file lacks a bold cut. */
  font-family: "PP Pangram Sans Compact";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/PPPangramSans-CompactSemibold.otf") format("opentype");
}

/* Inter (Google) is the secondary face used only in the moodboard swatch labels. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");

:root {
  /* ====================================================================== */
  /* COLORS — primitives                                                     */
  /* ====================================================================== */

  /* Brand & accent */
  --noah-orange:        #FF7628;   /* CTA / accent (rgb 255,118,40) */
  --noah-orange-deep:   #EF6630;   /* secondary orange surface fill */
  --noah-orange-tint:   #FFE0D4;   /* light orange surface, button rest */
  --noah-orange-glow:   rgba(239, 102, 48, 0.224); /* radial glow base */
  --noah-orange-rim:    #89392C;   /* dark accent outline / hover edge */

  /* ED theme — blue */
  --noah-blue:          #2E59BF;   /* primary blue (large surfaces + display text) */
  --noah-blue-tint:     #DBEBFD;   /* pastel blue surface (lockups, animation slate) */
  --noah-blue-deep:     #003534;   /* deep teal for cool-tone display copy */
  --noah-blue-soft:     #62A3BF;   /* secondary blue tone (rare) */
  --noah-blue-pale:     #E4E9F0;   /* sparingly used pale blue */

  /* Neutrals — warm */
  --noah-ink:           #302D28;   /* primary dark text (rgb 48,45,40) */
  --noah-ink-soft:      #3F3F3F;   /* secondary dark for borders */
  --noah-mute:          #ABA8A6;   /* muted text, "see side effects", subtitles */
  --noah-mute-2:        #B7B5B4;   /* very subtle text */
  --noah-mute-3:        #777777;   /* mid-grey label */
  --noah-line:          #E5E5E5;   /* hairline divider */
  --noah-line-2:        #BDBDBD;   /* stronger hairline */
  --noah-line-3:        #D1CFC9;   /* warm beige hairline */
  --noah-cream:         #F8F3ED;   /* primary cream background (product cards) */
  --noah-cream-warm:    #F9F6F2;   /* lighter cream */
  --noah-cream-pink:    #F9F2F6;   /* whisper of pink in cream */
  --noah-sand:          #ECE3D7;   /* deeper sand (CTA stripe) */
  --noah-sand-2:        #EBE3D7;   /* avatar fallback */
  --noah-sand-warm:     #DBCEBD;   /* warmest sand (hero gradient end) */
  --noah-bone:          #FFF3EF;   /* peachy bone */

  --noah-white:         #FFFFFF;
  --noah-black:         #000000;

  /* Shadow primitives */
  --noah-shadow-rim:    rgba(0, 0, 0, 0.4);    /* product render drop shadow */
  --noah-shadow-soft:   rgba(0, 0, 0, 0.08);   /* card hover lift */
  --noah-shadow-card:   rgba(48, 45, 40, 0.06);

  /* ====================================================================== */
  /* SEMANTIC color tokens                                                   */
  /* ====================================================================== */

  /* Foreground / text */
  --fg-1:               var(--noah-ink);       /* default body & display */
  --fg-2:               var(--noah-mute);      /* muted, prices-from, subtitles */
  --fg-3:               var(--noah-mute-2);    /* whisper text */
  --fg-inverse:         var(--noah-white);     /* on dark hero, on blue panel */
  --fg-accent:          var(--noah-orange);    /* small inline accents, footer labels */
  --fg-link:            var(--noah-orange);    /* CTA inline link */
  --fg-on-blue:         var(--noah-white);     /* text inside blue panels */

  /* Backgrounds / surfaces */
  --bg-page:            var(--noah-white);
  --bg-page-warm:       var(--noah-cream-warm);
  --bg-card:            var(--noah-cream);     /* product card outer */
  --bg-card-inner:      var(--noah-white);     /* inner spec slab in product cards */
  --bg-panel-blue:      var(--noah-blue);
  --bg-panel-blue-tint: var(--noah-blue-tint); /* lock-up / marquee bg */
  --bg-panel-sand:      var(--noah-sand);      /* footer lock-up */
  --bg-hero:            var(--noah-black);     /* hero baseplate */

  /* Borders */
  --border-strong:      var(--noah-ink);
  --border-default:     rgba(48, 45, 40, 0.12);
  --border-hairline:    var(--noah-line);
  --border-cream:       var(--noah-line-3);

  /* Action / CTA */
  --action-fg:          var(--noah-white);
  --action-bg:          var(--noah-orange);
  --action-bg-hover:    #EE6918;
  --action-bg-press:    #D85E13;
  --action-bg-tint:     var(--noah-orange-tint);

  /* States */
  --state-hover-tint:   rgba(48, 45, 40, 0.04);
  --state-press-tint:   rgba(48, 45, 40, 0.08);
  --focus-ring:         var(--noah-orange);

  /* ====================================================================== */
  /* TYPOGRAPHY                                                              */
  /* ====================================================================== */

  /* Families
     ── PP Pangram Sans Compact is the brand face, loaded from /fonts/.
        Weights available: 400 Regular, 500 Medium, 600 Semibold (also mapped to 700). */
  --font-display:  "PP Pangram Sans Compact", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:     "PP Pangram Sans Compact", "Inter", system-ui, -apple-system, sans-serif;
  --font-spec:     "Inter", "PP Pangram Sans Compact", system-ui, sans-serif; /* swatch/spec labels in the moodboard */
  --font-cjk:      "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;

  /* Weights actually used in the file */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Display scale (drawn from observed sizes in the Figma) */
  --type-mega:        128px;    /* swatch-board section title ("ED — Erectile Dysfunction") */
  --type-hero-xl:     110px;    /* social tile hero ("Getting hard can be easy") */
  --type-hero-l:      100px;    /* social tile hero ("As discreet as your incognito tabs") */
  --type-display-xl:   90px;    /* desktop animated headline */
  --type-display-l:    67px;    /* section H1 ("Discreet, proven treatment…") */
  --type-display-m:    51px;    /* sub-display ("Why Noah?", quote, quiz) */
  --type-display-s:    45px;    /* product-set title on social */
  --type-display-xs:   40px;    /* social lock-up tagline */
  --type-headline:     34px;    /* primary button label */
  --type-title-l:      28px;    /* section title + product card name */
  --type-title:        22px;    /* large body, helper copy on hero */
  --type-body:         18px;    /* default body, list items, ratings */
  --type-label:        16px;    /* nav, small chip text */
  --type-meta:         14px;    /* small caps, marquee, prescription badge */
  --type-micro:        12px;    /* footer legal */

  --leading-tight:    1.0;      /* hero, social tiles */
  --leading-snug:     1.1;      /* "Getting / hard / can / be / easy" stack */
  --leading-normal:   1.3;      /* body / standard */

  /* ====================================================================== */
  /* SPACING / RADII / SHADOWS                                               */
  /* ====================================================================== */

  --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-9:  40px;
  --space-10: 48px;
  --space-12: 60px;
  --space-14: 72px;
  --space-16: 80px;
  --space-20: 110px;

  /* Radii — Noah uses a tight set: 8, 16, 20, 24, "huge" 40/64 */
  --radius-xs: 8px;     /* prescription badge */
  --radius-s:  16px;    /* answer pills, inner spec slab, nav chip */
  --radius-m:  20px;    /* product card, hero CTA */
  --radius-l:  24px;    /* large panels (blue slate, lifestyle hero) */
  --radius-xl: 40px;    /* lock-up top corners */
  --radius-2xl: 64px;   /* blue accent swatch in moodboard */
  --radius-pill: 999px;

  /* Shadow system */
  --shadow-render: -3px 6px 3px 0 var(--noah-shadow-rim); /* product render */
  --shadow-card:   0 2px 8px 0 var(--noah-shadow-card);
  --shadow-pop:    0 6px 24px -6px rgba(48, 45, 40, 0.18);

  /* Protection / scrim gradients */
  --scrim-bottom:  linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
  --scrim-strong:  linear-gradient(rgba(0,0,0,0) 0%, rgb(0,0,0) 100%);
  --scrim-soft:    linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.43) 100%);
  --hero-fade:     linear-gradient(rgb(255,255,255) 0%, rgb(219,206,189) 100%); /* warm sand sundown */
  --glass-veil:    linear-gradient(rgba(255,255,255,0.25) 0%, rgba(119,119,119,0.25) 100%); /* product hero glass */

  /* Easing */
  --ease-out:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast:      120ms;
  --dur-base:      220ms;
  --dur-slow:      400ms;
}

/* =========================================================================
   Element defaults (semantic typography)
   ========================================================================= */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--type-display-l);
  line-height: var(--leading-tight);
  letter-spacing: -0.003em;
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--type-display-m);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--type-title-l);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--type-meta);
  letter-spacing: 0;
  color: var(--fg-1);
}

.price {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--type-title);
  color: var(--fg-1);
}

.legal {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--type-meta);
  color: var(--noah-white);
  opacity: 0.95;
}

.micro {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--type-micro);
  color: var(--fg-1);
}

/* ED accent — section section header pattern from moodboard */
.accent-blue { color: var(--noah-blue); }
.accent-orange { color: var(--noah-orange); }
.muted { color: var(--fg-2); }