/* ==========================================================================
   OWN STUDIOS — design tokens
   Source of truth for every surface: landing page, ad creative, decks.
   Derived from the brand guidelines sheet in brand/reference/.
   ========================================================================== */

/* --- Typefaces -------------------------------------------------------------
   Forum      — headlines only. Display face; never below ~24px.
   Montserrat — subheadlines, body, UI, buttons, form labels.
   Both are on Google Fonts:
   https://fonts.googleapis.com/css2?family=Forum&family=Montserrat:wght@300;400;500;600&display=swap
--------------------------------------------------------------------------- */

:root {
  /* ---- Brand palette (exact values from the guidelines sheet) ---- */
  --own-charcoal: #1E1E1E;  /* Strength · Sophistication · Trust */
  --own-taupe:    #A68B73;  /* Warmth · Balance · Modern  — the accent */
  --own-cream:    #F8F6F1;  /* Clean · Minimal · Approachable — the ground */
  --own-sage:     #7A8A7F;  /* Growth · Wellness · Community */
  --own-stone:    #D9D4CC;  /* Calm · Neutral · Timeless */

  /* ---- Derived neutrals -------------------------------------------------
     Charcoal and cream mixed rather than pure greys, so every neutral
     carries the same warm bias as the brand.                              */
  --own-charcoal-80: #4A4A48;
  --own-charcoal-60: #6E6E6B;
  --own-ink-soft:    #57565A;
  --own-hairline:    #E6E2DA;
  --own-taupe-dark:  #8A7160;  /* accessible taupe on CREAM — see usage rules below */
  --own-taupe-lift:  #C0A288;  /* accessible taupe on CHARCOAL/imagery (6.9:1 on #1E1E1E) */
  --own-taupe-tint:  #EFE7DF;

  /* ---- Semantic roles: light ground (default) ---- */
  --bg:            var(--own-cream);
  --surface:       #FFFFFF;
  --surface-alt:   #F2EFE9;
  --text:          var(--own-charcoal);
  --text-muted:    var(--own-charcoal-60);
  --hairline:      var(--own-hairline);
  --accent:        var(--own-taupe);
  --accent-text:   var(--own-taupe-dark);
  --on-accent:     var(--own-cream);

  /* ---- Type scale (1.25 minor third) ---- */
  --step--1: 0.8rem;
  --step-0:  1rem;
  --step-1:  1.25rem;
  --step-2:  1.563rem;
  --step-3:  1.953rem;
  --step-4:  2.441rem;
  --step-5:  3.052rem;
  --step-6:  3.815rem;

  /* ---- Spacing (8pt) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- Brand signatures ----------------------------------------------
     The taupe rule under the wordmark is the one recurring device.
     Reuse it as a section divider; do not invent other ornaments.       */
  --rule-w: 96px;
  --rule-h: 1.5px;
  --tracking-wide: 0.18em;  /* STUDIOS / eyebrow lockup spacing */
  --tracking-tag:  0.06em;  /* tagline spacing */
  --radius: 2px;            /* the brand is square-cornered; keep it minimal */
}

/* ---- Dark ground -------------------------------------------------------
   The charcoal lockup is a first-class brand expression (signage, apron,
   business card), so dark is a designed mode, not an inversion.        */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          var(--own-charcoal);
    --surface:     #262625;
    --surface-alt: #2F2F2D;
    --text:        var(--own-cream);
    --text-muted:  #ADA79E;
    --hairline:    #3A3A37;
    --accent:      var(--own-taupe);
    --accent-text: #C0A288;   /* lifted for legibility on charcoal */
    --on-accent:   var(--own-charcoal);
  }
}
:root[data-theme="dark"] {
  --bg:          var(--own-charcoal);
  --surface:     #262625;
  --surface-alt: #2F2F2D;
  --text:        var(--own-cream);
  --text-muted:  #ADA79E;
  --hairline:    #3A3A37;
  --accent:      var(--own-taupe);
  --accent-text: #C0A288;
  --on-accent:   var(--own-charcoal);
}

/* ==========================================================================
   USAGE RULES — measured, not opinions
   --------------------------------------------------------------------------
   Contrast ratios against cream (#F8F6F1):

     Charcoal #1E1E1E .......... 15.4:1  ✅ any size, any use
     Sage     #7A8A7F ..........  3.4:1  ⚠️  large text (24px+) and UI only
     Taupe    #A68B73 ..........  3.0:1  ⚠️  DECORATIVE ONLY — never body text
     Stone    #D9D4CC ..........  1.2:1  ❌ fills, rules and dividers only

   So: taupe is the mark, the rule, the button fill, the icon — it is NOT a
   text color on cream. For taupe-colored *type* use --accent-text
   (#8A7160, 4.6:1) which passes AA at body size and still reads as taupe.

   This matters most in ad creative, where Meta compresses images and thin
   low-contrast type disappears entirely in-feed.
   ========================================================================== */

/* ---- Primitives ---- */
.own-display {
  font-family: Forum, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.12;
  text-wrap: balance;
}
.own-body {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.6;
}
.own-eyebrow {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.own-rule {
  width: var(--rule-w);
  height: var(--rule-h);
  background: var(--accent);
  border: 0;
  margin: var(--sp-5) 0;
}
.own-btn {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: var(--sp-3) var(--sp-6);
  background: var(--own-charcoal);
  color: var(--own-cream);
  border: 1px solid var(--own-charcoal);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .18s, color .18s;
}
.own-btn:hover { background: var(--own-taupe-dark); border-color: var(--own-taupe-dark); }
.own-btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.own-btn--ghost { background: transparent; color: var(--text); }
.own-btn--ghost:hover { background: var(--own-taupe-tint); color: var(--own-charcoal); border-color: var(--own-taupe-dark); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }