/* =================================================================
   Cloud Closet — Design Tokens
   Editorial fashion. Cream paper, ink-black type, generous space.
   ================================================================= */

/* Webfonts — Google Fonts substitutes
   - Display serif: Newsreader (subbing for what looks like Canela/PP Editorial New)
   - UI/body sans:  Hanken Grotesk (subbing for a Söhne / Neue Haas grotesque)
   See README "Typography" for the substitution flag. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500&family=Hanken+Grotesk:wght@300;400;500;600&display=swap');

:root {
  /* -------- Color: paper & ink -------- */
  --cc-paper:        #F7F7EF;  /* warm cream — the canvas */
  --cc-paper-soft:   #F1F0E7;  /* slightly deeper cream for subtle separation */
  --cc-card:         #FFFFFF;  /* card surface */
  --cc-ink:          #111111;  /* primary text, buttons, lines */
  --cc-ink-soft:     #2A2A2A;  /* secondary headings */
  --cc-ink-mute:     #5C5C58;  /* body / supporting copy */
  --cc-ink-faint:    #9A9A93;  /* metadata, captions */
  --cc-rule:         #E6E5DC;  /* hairline dividers on cream */
  --cc-rule-strong:  #111111;  /* nav underline, structural rules */
  --cc-tag:          #F1F0EA;  /* tag chip fill */
  --cc-tag-ink:      #111111;  /* tag chip text */
  --cc-photo-bg:     #EEEDE5;  /* the soft tone behind cutout outfit photos */

  /* Semantic — kept intentionally muted; the brand is mono */
  --cc-success:      #2F6B3A;
  --cc-warning:      #8A6A1A;
  --cc-danger:       #8B2A2A;

  /* -------- Typography stacks -------- */
  --cc-font-serif:   'Newsreader', 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --cc-font-sans:    'Hanken Grotesk', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* -------- Type scale (display / editorial) -------- */
  --cc-display-xl:   clamp(48px, 6vw, 88px);   /* hero headline */
  --cc-display-lg:   clamp(36px, 4.2vw, 56px); /* section headline */
  --cc-display-md:   clamp(28px, 3vw, 40px);   /* feature heading */
  --cc-display-sm:   24px;                     /* card heading */

  /* -------- Type scale (UI / body) -------- */
  --cc-body-lg:      18px;
  --cc-body:         16px;
  --cc-body-sm:      14px;
  --cc-caption:      12px;
  --cc-eyebrow:      12px;  /* uppercase nav / labels */

  /* -------- Spacing scale -------- */
  --cc-space-1:   4px;
  --cc-space-2:   8px;
  --cc-space-3:   12px;
  --cc-space-4:   16px;
  --cc-space-5:   24px;
  --cc-space-6:   32px;
  --cc-space-7:   48px;
  --cc-space-8:   64px;
  --cc-space-9:   96px;
  --cc-space-10: 128px;

  /* -------- Radii — soft, never severe -------- */
  --cc-radius-sm:    6px;   /* pills, buttons */
  --cc-radius-md:    14px;  /* small cards, tag chips */
  --cc-radius-lg:    28px;  /* feature cards, outfit tiles */
  --cc-radius-xl:    44px;  /* phone-frame inner radius / hero panels */
  --cc-radius-pill:  999px;

  /* -------- Borders -------- */
  --cc-border-hair:    1px solid var(--cc-rule);
  --cc-border-ink:     1px solid var(--cc-ink);
  --cc-border-button:  1px solid var(--cc-ink);

  /* -------- Shadows — soft, ambient, paper-like -------- */
  --cc-shadow-sm:  0 1px 2px rgba(17,17,17,0.04), 0 2px 6px rgba(17,17,17,0.04);
  --cc-shadow-md:  0 2px 4px rgba(17,17,17,0.04), 0 12px 28px rgba(17,17,17,0.06);
  --cc-shadow-lg:  0 4px 8px rgba(17,17,17,0.05), 0 24px 60px rgba(17,17,17,0.08);

  /* -------- Motion -------- */
  --cc-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --cc-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --cc-dur-fast:    140ms;
  --cc-dur:         240ms;
  --cc-dur-slow:    420ms;

  /* -------- Layout -------- */
  --cc-container:    1240px;
  --cc-gutter:       40px;
}

/* =================================================================
   Semantic element styling — base styles for raw HTML
   ================================================================= */

body {
  background: var(--cc-paper);
  color: var(--cc-ink);
  font-family: var(--cc-font-sans);
  font-size: var(--cc-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display headings — serif, tight leading, very subtle letter-spacing */
.cc-h1, h1 {
  font-family: var(--cc-font-serif);
  font-weight: 400;
  font-size: var(--cc-display-xl);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--cc-ink);
  margin: 0;
}

.cc-h2, h2 {
  font-family: var(--cc-font-serif);
  font-weight: 400;
  font-size: var(--cc-display-lg);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--cc-ink);
  margin: 0;
}

.cc-h3, h3 {
  font-family: var(--cc-font-serif);
  font-weight: 400;
  font-size: var(--cc-display-md);
  line-height: 1.15;
  color: var(--cc-ink);
  margin: 0;
}

.cc-h4, h4 {
  font-family: var(--cc-font-serif);
  font-weight: 400;
  font-size: var(--cc-display-sm);
  line-height: 1.25;
  color: var(--cc-ink);
  margin: 0;
}

/* Body */
.cc-body, p {
  font-family: var(--cc-font-sans);
  font-weight: 400;
  font-size: var(--cc-body);
  line-height: 1.55;
  color: var(--cc-ink-mute);
  margin: 0;
}

.cc-body-lg { font-size: var(--cc-body-lg); line-height: 1.55; }
.cc-body-sm { font-size: var(--cc-body-sm); line-height: 1.5; }

/* Eyebrow / nav label — uppercase, tracked, 12px */
.cc-eyebrow {
  font-family: var(--cc-font-sans);
  font-size: var(--cc-eyebrow);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-ink);
}

/* Quote — serif italic optional */
.cc-quote {
  font-family: var(--cc-font-serif);
  font-size: 22px;
  line-height: 1.35;
  color: var(--cc-ink);
  font-weight: 400;
}

.cc-attribution {
  font-family: var(--cc-font-sans);
  font-size: var(--cc-body-sm);
  color: var(--cc-ink-mute);
}