/* ============================================================
   HairDew2026 Design System — Colors & Type
   Inspired by Glossier's visual system.
   Single typeface discipline (Aperçu → Inter fallback).
   Sharp corners. Flat color. The period is part of the brand.
   ============================================================ */

/* ----------------------------------------
   FONTS — Aperçu (Colophon Foundry, licensed)
   Woff files preferred (smaller, faster).
   Weights: 300 Light, 400 Regular + Italic,
            500 Medium + Italic, 700 Bold + Italic.
   ---------------------------------------- */
@font-face {
  font-family: 'Aperçu';
  src: url('fonts/Apercu-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aperçu';
  src: url('fonts/Apercu-Regular.woff') format('woff'),
       url('fonts/Apercu-Regular.ttf')  format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aperçu';
  src: url('fonts/Apercu-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Aperçu';
  src: url('fonts/Apercu-Medium.woff') format('woff'),
       url('fonts/Apercu-Medium.ttf')  format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aperçu';
  src: url('fonts/Apercu-MediumItalic.woff') format('woff');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Aperçu';
  src: url('fonts/Apercu-Bold.woff') format('woff'),
       url('fonts/Apercu-Bold.ttf')  format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aperçu';
  src: url('fonts/Apercu-BoldItalic.woff') format('woff');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* -------------------------------------
     TYPE FAMILIES
     ------------------------------------- */
  --font-sans: 'Aperçu', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Aperçu', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* -------------------------------------
     BRAND COLORS
     ------------------------------------- */
  --color-pink:           #fce5e1;  /* Glossier Pink — brand neutral */
  --color-pink-tint:      #fdf0ed;  /* Subtle pink wash */
  --color-cream:          #faf7f5;  /* Barely-there off-white */
  --color-red:            #e9002f;  /* Cloud Paint Red — promo only */
  --color-mint:           #cde9dd;
  --color-sky:            #b8e2f0;
  --color-peach:          #fdd7c4;

  /* -------------------------------------
     NEUTRALS
     ------------------------------------- */
  --color-black:          #000000;
  --color-near-black:     #1a1a1a;
  --color-gray-mid:       #767676;
  --color-gray-light:     #b3b3b3;
  --color-gray-hairline:  #e5e5e5;
  --color-gray-input:     #f5f5f5;
  --color-white:          #ffffff;

  /* -------------------------------------
     SEMANTIC FOREGROUND / BACKGROUND
     ------------------------------------- */
  --fg-1:                 var(--color-black);       /* primary text / wordmark */
  --fg-2:                 var(--color-near-black);  /* long-form body */
  --fg-3:                 var(--color-gray-mid);    /* captions, metadata */
  --fg-4:                 var(--color-gray-light);  /* placeholders, disabled */
  --fg-inverse:           var(--color-white);

  --bg-1:                 var(--color-white);       /* primary canvas */
  --bg-2:                 var(--color-pink);        /* secondary canvas */
  --bg-3:                 var(--color-pink-tint);   /* subtle wash */
  --bg-4:                 var(--color-cream);       /* tertiary off-white */
  --bg-input:             var(--color-gray-input);
  --bg-overlay:           rgba(0, 0, 0, 0.40);

  --border-hairline:      var(--color-gray-hairline);
  --border-strong:        var(--color-black);

  /* -------------------------------------
     SEMANTIC STATE
     ------------------------------------- */
  --color-error:          #d0021b;
  --color-error-bg:       #fde8ea;
  /* No dedicated success color — pink/mint do the work */

  /* -------------------------------------
     SPACING (base 4px)
     ------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32:  128px;

  /* -------------------------------------
     RADIUS — sharp discipline
     ------------------------------------- */
  --radius-sharp:   0px;     /* default for buttons, cards, inputs, images */
  --radius-pill:    999px;   /* tags, badges, filter pills */
  --radius-circle:  50%;     /* avatars, stickers, loaders */

  /* -------------------------------------
     ELEVATION
     ------------------------------------- */
  --elev-0:   none;                                             /* flat */
  --elev-1:   inset 0 -1px 0 var(--border-hairline);            /* ruled */
  --elev-3:   0 4px 16px rgba(0, 0, 0, 0.08);                    /* modals, drawers */
  --elev-scrim: var(--bg-overlay);

  /* -------------------------------------
     LAYOUT
     ------------------------------------- */
  --container-max:    1440px;
  --container-narrow: 1040px;
  --container-read:   880px;
  --container-pad:    32px;

  /* -------------------------------------
     TYPE SCALE
     ------------------------------------- */
  --fs-display:    72px;
  --fs-page:       48px;
  --fs-section:    32px;
  --fs-sub:        24px;
  --fs-sub-sm:     20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-ui:         14px;
  --fs-caption:    13px;
  --fs-micro:      11px;

  --lh-tight:      1.05;
  --lh-snug:       1.15;
  --lh-normal:     1.45;
  --lh-body:       1.50;

  --tracking-display: -0.02em;
  --tracking-page:    -0.01em;
  --tracking-button:  0.04em;
  --tracking-overline: 0.12em;

  /* -------------------------------------
     MOTION
     Glossier is animation-light.
     Fades and simple swaps, ~150-250ms.
     ------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;
}

/* ============================================================
   BASE ELEMENTS
   ============================================================ */
html {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
}

/* -------- Headings — lowercase is the house voice -------- */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-transform: lowercase;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-page);
  font-weight: 700;
  line-height: 1.10;
  letter-spacing: var(--tracking-page);
  margin: 0;
  text-transform: lowercase;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: var(--lh-snug);
  margin: 0;
  text-transform: lowercase;
}
h4, .h4 {
  font-size: var(--fs-sub);
  font-weight: 700;
  line-height: 1.20;
  margin: 0;
  text-transform: lowercase;
}
h5, .h5 {
  font-size: var(--fs-sub-sm);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  text-transform: lowercase;
}

/* -------- Body copy -------- */
p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 var(--space-4) 0;
}
.lead, .body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}
.product-copy, .italic-note {
  font-style: italic;
  color: var(--fg-2);
}

/* -------- Small text -------- */
.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.micro {
  font-size: var(--fs-micro);
  line-height: 1.40;
  color: var(--fg-3);
}

/* -------- Overline / eyebrow / button -------- */
.overline, .eyebrow {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  line-height: 1.20;
  color: var(--fg-1);
}

/* -------- Links -------- */
a {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-base) var(--ease-standard);
}
a:hover { opacity: 0.6; }

/* -------- Horizontal rule -------- */
hr {
  border: 0;
  height: 1px;
  background: var(--border-hairline);
  margin: var(--space-8) 0;
}

/* -------- Code -------- */
code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-input);
  padding: 2px 6px;
}

/* -------- The period is the brand. -------- */
.wordmark::after {
  content: '.';
}

/* ============================================================
   RESPONSIVE TYPE SCALING
   ============================================================ */
@media (max-width: 1023px) {
  :root { --fs-display: 56px; --fs-page: 40px; }
}
@media (max-width: 767px) {
  :root { --fs-display: 48px; --fs-page: 36px; --fs-section: 28px; }
}
@media (max-width: 639px) {
  :root { --fs-display: 40px; --fs-page: 32px; --fs-section: 24px; }
}