/* ============================================================
   DYCED DESIGN SYSTEM — canonical tokens (single source of truth)
   Brand: Dyced Physique & Nutrition Coaching.
   Look: matte-dark canvas, steel-blue accent, chrome, bone ink.
   Voice: blunt, anti-hype. CTAs: Apply / Start Now.

   This ONE file defines both the @dyced/ds token names AND the
   website's legacy names (aliased onto the same values), so every
   surface — website, Claude tools, emails — shares one definition.
   Change a color here and it changes everywhere that links this file.
   ============================================================ */
:root {
  /* ── Brand scale ─────────────────────────────────────────── */
  --steel-300: #C2D3E4;
  --steel-400: #A6BFD6;
  --steel-500: #7C9BB8;   /* primary accent */
  --steel-600: #536F8C;
  --chrome-400: #C7CDD4;
  --chrome-500: #9AA1AA;
  --chrome-600: #6B727B;

  /* ── Surfaces (matte dark) ───────────────────────────────── */
  --bg-0: #0B0B0C;        /* page canvas */
  --bg-1: #0F0F10;        /* raised */
  --bg-2: #181818;        /* card */
  --bg-3: #222226;        /* hover / top layer */

  /* ── Ink ─────────────────────────────────────────────────── */
  --text-100: #F3EFE7;    /* bone */
  --muted: rgba(154,161,170,0.78);
  --dim:   rgba(154,161,170,0.42);

  /* ── Semantic ────────────────────────────────────────────── */
  --accent:        var(--steel-500);
  --accent-hover:  var(--steel-400);
  --on-accent:     #0B0B0C;
  --surface-page:  var(--bg-0);
  --surface-card:  var(--bg-2);
  --border-hairline: rgba(199,205,212,0.10);
  --border-accent:   rgba(124,155,184,0.20);

  /* ── Legacy website aliases (map onto canonical) ─────────── */
  --gold:       var(--steel-500);
  --gold-light: var(--steel-400);
  --gold-dim:   rgba(124,155,184,0.10);
  --bg:   var(--bg-0);
  --bg2:  var(--bg-1);
  --bg3:  var(--bg-2);
  --text: var(--text-100);
  --border: #2a2a2a;

  /* ── @dyced/ds library aliases (so the React-lib/carousel token
        names resolve against THIS single source too) ──────────── */
  --text-70: var(--muted);   /* muted body */
  --text-40: var(--dim);     /* dim labels */
  --text-primary:   var(--text-100);
  --text-secondary: var(--muted);
  --text-muted:     var(--dim);

  /* ── Type families (canonical — every surface uses these) ──── */
  --font-display: 'Bebas Neue', sans-serif;      /* headlines, all-caps */
  --font-body:    'Inter', system-ui, sans-serif; /* body copy */
  --font-mono:    'JetBrains Mono', monospace;    /* eyebrows / labels */

  /* ── Semantic status ─────────────────────────────────────── */
  --danger: #cc3333;   /* form errors / validation (matches live site) */
  --danger-soft: #ff6b6b;  /* lighter red for badges (e.g. .badge-myth) */
}

/* ============================================================
   COMPONENTS — canonical shared UI (2026-07-02)
   Previously these were copy-pasted inline on every page, which
   is why the pages drifted. Now defined once here so every page
   inherits one definition. Legacy class names are aliased onto
   the canonical style, so existing markup/selectors keep working.
   Pages may still add page-specific composition on top; only the
   shared base lives here.
   ============================================================ */

/* ── Scroll reveal ───────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.1s; }
.reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; }

/* ── Kicker / eyebrow labels (all legacy names, one look) ────── */
.ds-kicker, .section-label, .mono-label, .eyebrow,
.prod-hero-label, .learn-hero-label, .side-label, .days-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(124,155,184,0.5);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.ds-btn, .btn-gold {
  display: inline-block; background: var(--gold); color: #080808;
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none; text-align: center;
  padding: 1rem 2.5rem; border: none; cursor: pointer;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: background 0.2s, transform 0.2s;
}
.ds-btn:hover, .btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); }
.btn-outline {
  display: inline-block; background: transparent; color: var(--muted);
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; text-align: center; cursor: pointer;
  padding: 1rem 2.2rem; border: 1px solid rgba(245,245,245,0.18);
  transition: color 0.2s, border-color 0.2s;
}
.btn-outline:hover { color: var(--text); border-color: rgba(245,245,245,0.4); }
/* size modifiers for hero / compact contexts */
.btn-gold.btn-lg, .btn-outline.btn-lg { padding: 1.15rem 3rem; font-size: 0.82rem; }
.btn-gold.btn-sm, .btn-outline.btn-sm { padding: 0.8rem 1.7rem; font-size: 0.74rem; }

/* ── Meta chips ──────────────────────────────────────────────── */
.meta-chip {
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); border: 1px solid rgba(245,245,245,0.1); padding: 0.2rem 0.6rem;
}
.meta-chip.gold { color: var(--gold); border-color: rgba(124,155,184,0.3); }

/* ── Standalone card + hover-lift (article / product / inside) ─ */
.ds-card {
  background: var(--bg); border: 1px solid rgba(245,245,245,0.07);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.ds-card:hover { background: var(--bg2); border-color: rgba(124,155,184,0.35); transform: translateY(-3px); }

/* ── Numbered feature grid (What's Inside / What 1:1 Means) ──── */
/* standalone cards that wrap cleanly — no bordered container that
   leaves empty "boxes" when the last row is incomplete */
.inside-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.inside-cell {
  background: var(--bg2); border: 1px solid rgba(245,245,245,0.07); padding: 1.8rem;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.inside-cell:hover { background: var(--bg3); border-color: rgba(124,155,184,0.35); transform: translateY(-3px); }
.inside-n { font-family: 'Bebas Neue', sans-serif; font-size: 2.4rem; color: rgba(124,155,184,0.25); line-height: 1; margin-bottom: 0.6rem; }
.inside-cell h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.4rem; }
.inside-cell p { font-size: 0.82rem; color: var(--muted); line-height: 1.7; }

/* ── Flip-card mechanics (reusable 3D flip) ──────────────────── */
.flip-card { perspective: 1500px; cursor: pointer; }
.flip-card .flip-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.7s cubic-bezier(.2,.75,.2,1); transform-style: preserve-3d;
}
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-card .flip-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid rgba(245,245,245,0.08); background: var(--bg2); transition: border-color 0.2s;
}
.flip-card:hover .flip-face { border-color: rgba(124,155,184,0.35); }
.flip-card .flip-back { transform: rotateY(180deg); }