/* style.css — Forge Creative Studio design tokens + components */

/* ============ SELF-HOSTED BRAND TYPEFACE: AWESOME SERIF ============
   Real licensed brand font for site H1/H2 headlines only. Not used for the
   logo lockup (logo stays Cormorant Garamond + Tenor Sans per brand spec). */
@font-face {
  font-family: 'Awesome Serif';
  src: url('./brand-assets/fonts/awesome-serif/AwesomeSerif-BoldTall.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Awesome Serif';
  src: url('./brand-assets/fonts/awesome-serif/AwesomeSerif-LightRegular.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ============ TYPE SCALE ============ */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 0.5rem + 6vw, 6.5rem);

  /* ============ SPACING ============ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ============ RADIUS ============ */
  --radius-sm: 0.1875rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-xl: 0.5rem;
  --radius-full: 9999px;

  /* ============ TRANSITIONS ============ */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ============ CONTENT WIDTHS ============ */
  --content-narrow: 640px;
  --content-default: 880px;
  --content-wide: 1160px;
  --content-full: 100%;

  /* ============ FONTS ============ */
  /* --font-display: reserved for the logo lockup and editorial serif accents
     (Cormorant Garamond). Never used for H1/H2 anymore. */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  /* --font-headline: real brand typeface for site H1/H2. Cormorant Garamond
     is kept loaded via Google Fonts as the safety-net fallback if the
     self-hosted OTF fails to load for any reason. */
  --font-headline: 'Awesome Serif', 'Cormorant Garamond', Georgia, serif;
  --font-logo: 'Tenor Sans', 'Helvetica Neue', sans-serif;
  --font-body: 'Montserrat', 'Helvetica Neue', sans-serif;

  /* ============ FORGE BRAND PALETTE — warmth-only, no chromatic accent ============
     Source of truth: brand-assets/forge-color-palette.csv
     "A warmth-only system. No chromatic accent. Hierarchy through tonal depth." */
  --color-cozy-cream: #f7f5f2;
  --color-quiet-beige: #ebe6de;
  --color-almond-shade: #d9d2c5;
  --color-warm-clay: #bfae9f;
  --color-hurricane: #8c8177;
  --color-dark-taupe: #4a443f;
  --color-charcoal: #1c1c1c;

  --color-bg: var(--color-cozy-cream);
  --color-surface: #fffffe;
  --color-surface-2: #ffffff;
  --color-surface-offset: var(--color-quiet-beige);
  --color-surface-offset-2: var(--color-almond-shade);
  --color-surface-dynamic: var(--color-warm-clay);
  --color-divider: var(--color-hurricane);
  --color-border: var(--color-warm-clay);

  --color-text: var(--color-charcoal);
  --color-text-muted: var(--color-dark-taupe);
  --color-text-faint: var(--color-hurricane);
  --color-text-inverse: var(--color-cozy-cream);

  /* Hierarchy through tonal depth — no chromatic accent color.
     "Primary" tokens map to charcoal/cream tonal contrast, not a new hue. */
  --color-primary: var(--color-charcoal);
  --color-primary-hover: #000000;
  --color-primary-active: #000000;
  --color-primary-highlight: var(--color-almond-shade);

  --color-warning: var(--color-dark-taupe);
  --color-warning-highlight: var(--color-quiet-beige);
  --color-error: var(--color-dark-taupe);
  --color-error-highlight: var(--color-quiet-beige);
  --color-success: var(--color-charcoal);
  --color-success-highlight: var(--color-almond-shade);

  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.08);
  --shadow-md: 0 6px 20px oklch(0.2 0.01 80 / 0.10);
  --shadow-lg: 0 20px 48px oklch(0.2 0.01 80 / 0.16);
}

/* ============ DARK MODE — same warmth-only tokens, inverted tonal depth ============ */
[data-theme='dark'] {
  --color-bg: var(--color-charcoal);
  --color-surface: #242322;
  --color-surface-2: #2a2928;
  --color-surface-offset: #2f2d2b;
  --color-surface-offset-2: var(--color-dark-taupe);
  --color-surface-dynamic: var(--color-hurricane);
  --color-divider: var(--color-dark-taupe);
  --color-border: var(--color-hurricane);

  --color-text: var(--color-cozy-cream);
  --color-text-muted: var(--color-warm-clay);
  --color-text-faint: var(--color-hurricane);
  --color-text-inverse: var(--color-charcoal);

  --color-primary: var(--color-cozy-cream);
  --color-primary-hover: #ffffff;
  --color-primary-active: #ffffff;
  --color-primary-highlight: var(--color-dark-taupe);

  --color-warning: var(--color-warm-clay);
  --color-warning-highlight: var(--color-dark-taupe);
  --color-error: var(--color-warm-clay);
  --color-error-highlight: var(--color-dark-taupe);
  --color-success: var(--color-cozy-cream);
  --color-success-highlight: var(--color-dark-taupe);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 6px 20px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 20px 48px oklch(0 0 0 / 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: var(--color-charcoal);
    --color-surface: #242322;
    --color-surface-2: #2a2928;
    --color-surface-offset: #2f2d2b;
    --color-surface-offset-2: var(--color-dark-taupe);
    --color-surface-dynamic: var(--color-hurricane);
    --color-divider: var(--color-dark-taupe);
    --color-border: var(--color-hurricane);
    --color-text: var(--color-cozy-cream);
    --color-text-muted: var(--color-warm-clay);
    --color-text-faint: var(--color-hurricane);
    --color-text-inverse: var(--color-charcoal);
    --color-primary: var(--color-cozy-cream);
    --color-primary-hover: #ffffff;
    --color-primary-active: #ffffff;
    --color-primary-highlight: var(--color-dark-taupe);
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
    --shadow-md: 0 6px 20px oklch(0 0 0 / 0.35);
    --shadow-lg: 0 20px 48px oklch(0 0 0 / 0.5);
  }
}

/* ============ BODY / TEXTURE ============ */
body {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(oklch(0.94 0.01 80 / 0.5) 1px, transparent 1px);
  background-size: 3px 3px;
  overflow-x: hidden;
}

main {
  min-height: 100dvh;
}

.sr-only-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============ SKIP LINK ============ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-4);
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

/* ============ TYPOGRAPHY ============ */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.eyebrow--muted {
  color: var(--color-text-muted);
}

h1,
.h1 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

h2,
.h2 {
  font-family: var(--font-headline);
  font-weight: 300;
  letter-spacing: -0.005em;
  color: var(--color-text);
}

h3,
.h3 {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-text);
}

p {
  color: var(--color-text-muted);
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.text-ink {
  color: var(--color-text);
}

/* ============ LOGO / WORDMARK ============ */
/* Real brand lockup: "FORGE" (Cormorant Garamond Bold, 0.15em tracking)
   stacked over "CREATIVE STUDIO" (Tenor Sans Regular, 0.45em tracking).
   Wordmark lockup only — never combined with the circular submark badge. */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1;
}
.wordmark-line1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.15em;
  /* Letter-spacing adds trailing space after the last character, which shifts the
     visual center left of the true box center inside a centered flex column. Pull
     it back with a matching negative margin so the glyphs themselves sit centered. */
  margin-right: -0.15em;
  text-transform: uppercase;
}
.wordmark-line2 {
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: 0.55rem;
  letter-spacing: 0.45em;
  margin-right: -0.45em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (max-width: 480px) {
  /* Compact wordmark-only variant at narrow widths per brand doc allowance */
  .wordmark-line2 {
    display: none;
  }
}

/* ============ LAYOUT SHELLS ============ */
.shell {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-12));
}

.shell--narrow {
  max-width: var(--content-narrow);
}

.shell--default {
  max-width: var(--content-default);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-5);
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid oklch(from var(--color-border) l c h / 0.5);
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  min-height: 44px;
  white-space: nowrap;
  text-decoration: none;
  max-width: 100%;
  transition:
    background var(--transition-interactive),
    color var(--transition-interactive),
    border-color var(--transition-interactive),
    transform var(--transition-interactive),
    box-shadow var(--transition-interactive);
}

@media (max-width: 480px) {
  .btn {
    white-space: normal;
    text-align: center;
    padding: var(--space-4) var(--space-5);
    font-size: 12px;
    letter-spacing: 0.04em;
  }
}
.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
}
.btn-ghost:hover {
  color: var(--color-text);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-block {
  width: 100%;
}

/* ============ THEME TOGGLE ============ */
.theme-toggle {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 60;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.theme-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ============ CARD ============ */
.card {
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-border) l c h / 0.6);
  border-radius: var(--radius-lg);
}

/* ============ BRAND ICONS ============ */
.icon {
  display: block;
  width: 1em;
  height: 1em;
}
.btn__icon {
  display: inline-flex;
  width: 1.1em;
  height: 1.1em;
}
.btn__icon .icon {
  width: 100%;
  height: 100%;
}
.btn__icon--up {
  transform: rotate(-90deg);
}
.icon--diamond,
.icon--dot,
.icon--open-circle,
.icon--plus,
.icon--checkbox,
.icon--quote,
.icon--method-badge {
  width: 1.4em;
  height: 1.4em;
}

/* ============ SCREEN TRANSITIONS ============ */
.screen {
  opacity: 1;
}
.screen[hidden] {
  display: none !important;
}
.screen-enter {
  animation: screen-in 420ms var(--ease-out) both;
}
@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen-enter {
    animation: none;
  }
}