/* ============================================================
   MMA Academy — colour + type tokens
   ============================================================
   PORTED VERBATIM from colors_and_type.css in the Claude Design project
   MMA Academy Design System (7d708664-1b5e-4b54-8949-4c7d4e186b27),
   which is derived from Final MMA Brand Guidelines [DRAFT4] 092625.pdf.

   That file is the source of truth. If the two ever disagree, it wins.
   The only intentional differences here:

     1. @font-face src paths point at /assets/fonts/ instead of fonts/.
     2. The Söhne files are named Sohne-*.otf, plain ASCII. The Design
        project's copies carry a combining diaeresis and the sandbox
        rejected them; renaming avoids the whole class of problem.
     3. JetBrains Mono is not on this machine, so it loads from Google
        Fonts in the page HEAD rather than being self-hosted. It is OFL.

   The .otf binaries are gitignored. Söhne is a licensed Klim face and the
   webfont licence question is open (HANDOFF §8 Q5). Without them the page
   falls back to the brand's own documented substitutes, Aptos and Georgia,
   and still reads correctly.

   Repopulate them with:  python3 build.py --fonts
   ============================================================ */

/* ============================================================
 *  FONT FACES
 * ============================================================ */

@font-face {
  font-family: "Tiempos Text";
  src: url("fonts/TiemposText-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("fonts/TiemposText-RegularItalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("fonts/TiemposText-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("fonts/TiemposText-MediumItalic.otf") format("opentype");
  font-weight: 500; font-style: italic; font-display: swap;
}

/* Söhne — the brand faces. Only two cuts exist: Leicht 300 and Halbfett 600.
   400 and 500-700 are mapped onto them so an unstyled element still lands on
   Söhne rather than falling through to Aptos. */
@font-face {
  font-family: "Söhne";
  src: url("fonts/So_hne-Leicht.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Söhne";
  src: url("fonts/So_hne-Leicht.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Söhne";
  src: url("fonts/So_hne-Halbfett.otf") format("opentype");
  font-weight: 500 700; font-style: normal; font-display: swap;
}

/* ============================================================
 *  DESIGN TOKENS
 * ============================================================ */

:root {
  --paper-tex: url("../assets/images/academy-background.jpg"); /* @kind other */
  /* ---- Primary palette (MMA Gold + Onyx) ---- */
  --mma-gold:        #FFA400;   /* Pantone 137     */
  --mma-lt-gold:     #FFBB4D;   /* 75% tint        */
  --mma-onyx:        #000000;   /* Pantone Black 6 */
  --mma-lt-onyx:     #BBBCBC;   /* Cool Grey 4     */

  /* ---- Secondary palette ---- */
  --mma-emerald:     #00AB84;
  --mma-lt-emerald:  #66CDB7;
  --mma-sapphire:    #0047BB;
  --mma-lt-sapphire: #4079D6;
  --mma-topaz:       #E25700;
  --mma-lt-topaz:    #E98B4D;
  --mma-peridot:     #B5C900;
  --mma-lt-peridot:  #D6E466;

  /* ---- Canvas / neutral scale ---- */
  --mma-paper:       #FFFFFF;   /* default canvas */
  --mma-paper-warm:  #F7F5F1;   /* academy bg     */
  --mma-stroke:      #E5E5E5;   /* 1px rules      */
  --mma-stroke-2:    #C9C9C9;
  --mma-ink-60:      #666666;   /* 60% black      */
  --mma-ink-40:      #A3A3A3;

  /* ---- Semantic foreground / background ---- */
  --fg-1: var(--mma-onyx);
  --fg-2: var(--mma-ink-60);
  --fg-3: var(--mma-ink-40);
  --fg-accent: var(--mma-gold);
  --fg-inverse: #FFFFFF;

  --bg-1: var(--mma-paper);
  --bg-2: var(--mma-paper-warm);
  --bg-onyx: var(--mma-onyx);
  --bg-gold: var(--mma-gold);

  --border-1: var(--mma-stroke);
  --border-2: var(--mma-stroke-2);

  /* ---- Type stacks ---- */
  --font-display: "Söhne", "Aptos", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Söhne", "Aptos", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Tiempos Text", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Type scale ---- */
  --fs-display-1:  88px;   --lh-display-1: 1.05; /* @kind font */
  --fs-display-2:  64px;   --lh-display-2: 1.05; /* @kind font */
  --fs-h1:         48px;   --lh-h1:        1.1; /* @kind font */
  --fs-h2:         36px;   --lh-h2:        1.1; /* @kind font */
  --fs-h3:         28px;   --lh-h3:        1.15; /* @kind font */
  --fs-h4:         22px;   --lh-h4:        1.2; /* @kind font */
  --fs-body-lg:    22px;   --lh-body-lg:   1.45; /* @kind font */
  --fs-body:       18px;   --lh-body:      1.5; /* @kind font */
  --fs-body-sm:    16px;   --lh-body-sm:   1.45; /* @kind font */
  --fs-caption:    14px;   --lh-caption:   1.35; /* @kind font */
  --fs-eyebrow:    14px;   --lh-eyebrow:   1.25; /* @kind font */

  /* ---- Tracking ---- */
  --tracking-tight:   -0.01em; /* @kind font */
  --tracking-normal:  0; /* @kind font */
  --tracking-body:    0.005em; /* @kind font */
  --tracking-eyebrow: 0.12em; /* @kind font */

  /* ---- Spacing: 8pt grid with a 4pt half step ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
  --space-7: 48px;  --space-8: 64px;  --space-9: 96px;
  --space-10: 128px;

  /* ---- Radii: the brand skews square. Never pill-shape a primary button. ---- */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;  /* chips and badges only */

  /* ---- Elevation: restrained, the brand leans flat + sharp ---- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(0,0,0,0.06);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.10);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-in:    cubic-bezier(0.5, 0, 0.9, 0.3); /* @kind other */
  --ease-sharp: cubic-bezier(0.9, 0, 0.1, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* ---- The diagonal ---- */
  --diagonal-angle: 72deg; /* @kind other */
  --diagonal-gold: linear-gradient(
    var(--diagonal-angle),
    transparent calc(50% - 0.75px),
    var(--mma-gold) calc(50% - 0.75px),
    var(--mma-gold) calc(50% + 0.75px),
    transparent calc(50% + 0.75px)
  );
}

/* ============================================================
 *  SEMANTIC TYPE ROLES
 * ============================================================ */

.mma-display-1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-display-1); line-height: var(--lh-display-1);
  letter-spacing: var(--tracking-tight); color: var(--fg-1);
}
.mma-display-2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-display-2); line-height: var(--lh-display-2);
  letter-spacing: var(--tracking-tight); color: var(--fg-1);
}
.mma-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.mma-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--fg-1); }
.mma-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--fg-1); }
.mma-h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--fg-1); }

.mma-body-lg { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); letter-spacing: var(--tracking-body); color: var(--fg-1); }
.mma-body    { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-body);    line-height: var(--lh-body);    letter-spacing: var(--tracking-body); color: var(--fg-1); }
.mma-body-sm { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); letter-spacing: var(--tracking-body); color: var(--fg-1); }

.mma-serif       { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); letter-spacing: var(--tracking-body); color: var(--fg-1); }
.mma-serif-quote { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.25; color: var(--fg-1); }

.mma-caption { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--tracking-body); color: var(--fg-2); }
.mma-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-2); }

.mma-link {
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
.mma-link:hover { color: var(--mma-gold); }