/* ============================================================
   Play Design System — Colors & Type
   Consolidated entry point. Imports tokens.css and adds
   semantic shorthand variables matching the create-design-system
   skill convention (fg1, fg2, h1, h2, etc.).
   ============================================================ */

@import url("tokens.css");

:root {
  /* ---------- SEMANTIC FG / BG ---------- */
  --fg1: var(--ink);            /* primary body & display text */
  --fg2: var(--ink-2);           /* secondary, lede, body-l on dark surfaces */
  --fg3: var(--ink-3);           /* tertiary, captions, meta, t-body-s */
  --fg-muted: var(--neutral-500);

  --bg1: var(--paper);           /* canvas */
  --bg2: var(--paper-sunk);      /* sunken sections */
  --bg3: var(--neutral-100);     /* deeper surface */

  --border-1: var(--neutral-200);
  --border-2: var(--neutral-300);
  --border-strong: var(--ink);

  /* ---------- BRAND ROLES ---------- */
  --brand-primary:   var(--marigold-ui);          /* leads action */
  --brand-accent:    var(--magenta-ui);           /* punctuates */
  --brand-highlight: var(--teal-ui);              /* grounds */

  /* Link colors */
  --link:        var(--magenta-text);
  --link-hover:  var(--magenta-ui-hover);

  /* ---------- TYPE FAMILIES (semantic aliases) ---------- */
  --serif-display: var(--font-display);  /* Syne — display + headings */
  --sans-body:     var(--font-body);     /* Outfit — body + UI */
  --mono:          var(--font-mono);     /* JetBrains Mono — meta + code */
}

/* ---------- SEMANTIC TYPE STYLES ----------
   Use these directly on tags; they pair size + weight + tracking.
   For Tailwind-style utility classes (.t-display, .t-h1, etc.) see
   components.css.
   ============================================================ */
h1 {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--fg1);
  margin: 0;
}
h2 {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  color: var(--fg1);
  margin: 0;
}
h3 {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  color: var(--fg1);
  margin: 0;
}
h4 { font-family: var(--serif-display); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--fg1); margin: 0; }
h5 { font-family: var(--serif-display); font-weight: 600; font-size: var(--fs-h5); line-height: var(--lh-normal); color: var(--fg1); margin: 0; }
h6 { font-family: var(--serif-display); font-weight: 600; font-size: var(--fs-h6); line-height: var(--lh-normal); color: var(--fg1); margin: 0; }
p  { font-family: var(--sans-body); font-weight: 400; font-size: var(--fs-body-m); line-height: var(--lh-relaxed); color: var(--fg1); margin: 0; }
small, .caption { font-family: var(--sans-body); font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg3); }
code, pre, .mono { font-family: var(--mono); font-size: var(--fs-mono); }
/* Scope link styling away from .btn — buttons own their own colour/state per the DS,
   otherwise a:hover (0,1,1) outranks the variant colour (0,1,0) and the label flips to magenta. */
a:not(.btn) { color: var(--link); text-decoration: none; }
a:not(.btn):hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }