/* =========================================================
   DESIGN TOKENS — MARLON V BAILEY profile card (Phase 4)
   Change a value here and it updates everywhere.
   Contrast ratios measured against WCAG AA (4.5:1 for text).
   ========================================================= */
:root {
  /* Color ------------------------------------------------- */
  --navy:        #0C1E3C;  /* card face, primary dark          */
  --navy-raised: #162C52;  /* panels on navy                   */
  --gold:        #C8A250;  /* on navy only: 6.9:1              */
  --gold-deep:   #7E5F1C;  /* gold text on light: 5.4:1        */
  --white:       #FFFFFF;  /* text on navy: 16.6:1             */
  --paper:       #F7F4EE;  /* warm off-white face              */
  --ink:         #1B2433;  /* body text on paper: 14.2:1       */
  --ink-muted:   #5A6475;  /* secondary text on paper: 5.4:1   */
  --navy-muted:  #B9C3D6;  /* secondary text on navy: 9.4:1    */
  /* Bright gold on paper is only 2.2:1 — use it for lines,
     never for text on light backgrounds. */

  /* Type -------------------------------------------------- */
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text-xs:   0.8125rem;  /* 13px  labels, footnotes  */
  --text-sm:   0.9375rem;  /* 15px  secondary          */
  --text-base: 1.0625rem;  /* 17px  body               */
  --text-lg:   1.25rem;    /* 20px  section titles     */
  --text-name: clamp(2.25rem, 9vw, 3rem); /* the name  */
  --leading-tight: 1.05;
  --leading-body:  1.5;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --tracking-name: -0.01em;

  /* Space (4px base) -------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Shape ------------------------------------------------- */
  --radius-card:   18px;   /* the card itself          */
  --radius-button: 8px;    /* smaller: buttons sit inside the card */
  --rule:          1px solid var(--gold);
  --rule-strong:   2px solid var(--gold);

  /* Card proportions -------------------------------------- */
  --card-width: clamp(18rem, 92vw, 27.5rem); /* 288–440px */
  --card-min-height: calc(var(--card-width) * 1.75); /* ~4:7 vertical */

  /* Focus (keyboard) -------------------------------------- */
  --focus-on-dark:  3px solid var(--gold);
  --focus-on-light: 3px solid var(--navy);
  --focus-offset:   3px;

  /* Motion ------------------------------------------------ */
  --duration-flip: 600ms;
  --ease-flip: cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-flip: 0ms; }
}

/* Added for the approved mockup (Phase 5 revision) */
:root {
  --gold-light: #E4C77E;
  --gold-text: linear-gradient(180deg, #E8CC85 0%, #C8A250 55%, #A7832F 100%);
  --radius-front: 22px;
}