/* ============================================================
   TAROT BATTLE — Colors & Type
   A tactical card-battle game built on the public-domain
   Rider–Waite–Smith tarot. Vintage occult meets neon HUD.
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "Crete Round";
  src: url("fonts/CreteRound-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Crete Round";
  src: url("fonts/CreteRound-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* Crete Round ships only a single (regular) weight. "Bold" in the
   source game is faux-bold. We reproduce weight with letter-spacing,
   text-shadow ink-strokes, and scale rather than synthetic bolding
   where possible — but expose a bold token for fidelity. */

:root {
  /* ============================================================
     BASE COLOR TOKENS
     ============================================================ */

  /* — Parchment / card stock (the aged RWS paper) — */
  --parchment-0: #F6EFDD;   /* brightest highlight paper            */
  --parchment-1: #ECE1C6;   /* default card stock                   */
  --parchment-2: #DDCBA1;   /* aged surface, footer name-bands      */
  --parchment-3: #C4AE80;   /* worn edge / divider on light         */

  /* — Ink (black UI panels & the heavy RWS outline) — */
  --ink-900: #000000;       /* pure border keyline                  */
  --ink-800: #0B0A08;       /* primary dark panel                   */
  --ink-700: #15120D;       /* raised dark panel                    */
  --ink-600: #221E16;       /* hairline / inset on dark             */
  --ink-500: #38311F;       /* sepia-ink, muted strokes on dark     */

  /* — Arcana Blue (the Roses & Lilies card back) — */
  --arcana-100: #BFD6E8;
  --arcana-300: #6FA0C4;
  --arcana-500: #2E6CA0;    /* signature roses-&-lilies blue        */
  --arcana-700: #1C4A73;
  --arcana-900: #102C45;

  /* — Game HUD neons (lifted verbatim from the card overlay) — */
  --volt-green:  #48FF24;   /* the "M·A·D" label green              */
  --volt-yellow: #EEFF04;   /* the stat-value yellow                */
  --blood-red:   #FF1500;   /* danger / kill / outline accent       */
  --volt-green-deep:  #1F9E33;
  --volt-yellow-deep: #B9A800;
  --blood-red-deep:   #A50E00;

  /* — RWS illustration palette (for suit themes & data viz) — */
  --rws-sky:    #79C4D4;    /* tarot sky blue   (Air / Swords)      */
  --rws-gold:   #F2C44A;    /* star & sun gold  (light)            */
  --rws-meadow: #6E8B3D;    /* grass green      (Earth / Pentacles) */
  --rws-flame:  #C8551F;    /* terracotta flame (Fire / Wands)      */
  --rws-water:  #2E6CA0;    /* deep blue        (Water / Cups)      */
  --rws-flesh:  #E7C9A0;

  /* ============================================================
     SEMANTIC TOKENS
     ============================================================ */

  /* Surfaces */
  --bg-table:       #0B0A08;            /* the battle table / app bg */
  --bg-felt:        #14110C;            /* secondary felt surface    */
  --surface-card:   var(--parchment-1); /* a physical card face      */
  --surface-panel:  var(--ink-800);     /* dark HUD panel            */
  --surface-panel-2:var(--ink-700);
  --surface-band:   var(--parchment-2); /* card name footer band     */

  /* Lines & borders */
  --keyline:        var(--ink-900);     /* the 2px black card border */
  --keyline-light:  rgba(0,0,0,0.55);
  --hairline-dark:  rgba(255,255,255,0.10);
  --rule-parchment: var(--parchment-3);

  /* Text on dark */
  --fg-1:  #FFFFFF;                      /* primary on dark           */
  --fg-2:  #E7DcC4;                      /* parchment body on dark    */
  --fg-3:  #B8AC8E;                      /* muted label on dark       */
  --fg-disabled: #6E664F;

  /* Text on light (card faces) */
  --on-card-1: #16130D;                 /* primary ink on parchment  */
  --on-card-2: #463E2C;                 /* secondary ink             */
  --on-card-3: #6E634A;                 /* muted ink                 */

  /* Roles */
  --accent:        var(--volt-green);   /* primary interactive accent */
  --accent-stat:   var(--volt-yellow);  /* numeric stat highlight     */
  --danger:        var(--blood-red);
  --link-on-dark:  var(--rws-gold);

  /* Stat channels (Movement / Attack / Defense) */
  --stat-move:   var(--rws-sky);        /* M — swiftness, air         */
  --stat-attack: var(--blood-red);      /* A — aggression             */
  --stat-def:    var(--volt-green);     /* D — resilience             */

  /* ============================================================
     TYPE
     ============================================================ */
  --font-display: "Crete Round", "Roslindale", Georgia, "Times New Roman", serif;
  --font-body:    "Crete Round", Georgia, serif;
  --font-ui:      "Crete Round", Georgia, serif;
  --font-numeric: "Crete Round", Georgia, serif; /* tabular stat digits */

  --weight-regular: 400;  /* @kind font */
  --weight-bold:    700;  /* @kind font */

  /* Fluid display scale (occult headers) */
  --fs-display:  clamp(44px, 7vw, 88px);   /* @kind font */
  --fs-h1:       clamp(32px, 4.4vw, 54px);  /* @kind font */
  --fs-h2:       clamp(25px, 3vw, 36px);    /* @kind font */
  --fs-h3:       21px;
  --fs-title:    18px;   /* card titles, panel headers */
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-label:    12px;   /* HUD micro-labels (UPPERCASE)*/
  --fs-stat:     34px;   /* big MAD numerals            */

  --lh-tight:   1.04;  /* @kind font */
  --lh-snug:    1.22;  /* @kind font */
  --lh-body:    1.5;   /* @kind font */

  --tracking-display: -0.01em;  /* @kind spacing */
  --tracking-label:   0.22em;   /* @kind spacing */
  --tracking-title:   0.01em;   /* @kind spacing */

  /* ============================================================
     ELEVATION & RADII  (see VISUAL FOUNDATIONS in README)
     ============================================================ */
  --radius-card:  14px;   /* the rounded tarot-card corner          */
  --radius-panel: 10px;   /* HUD panel corner                       */
  --radius-chip:  6px;
  --radius-pill:  999px;

  /* Cards sit on a table: a grounded drop shadow, never floaty */
  --shadow-card:  0 2px 0 rgba(0,0,0,0.35), 0 14px 28px -10px rgba(0,0,0,0.7);
  --shadow-lift:  0 4px 0 rgba(0,0,0,0.4), 0 26px 50px -16px rgba(0,0,0,0.8);
  --shadow-panel: inset 0 0 0 1px rgba(255,255,255,0.06), 0 10px 24px -12px rgba(0,0,0,0.8);
  --glow-volt:    0 0 0 1px rgba(72,255,36,0.5), 0 0 18px -2px rgba(72,255,36,0.55); /* @kind shadow */

  /* Motion (easing/duration) and the --border-card shorthand are not part of
     the color/spacing/radius/shadow/font token taxonomy; they live with the
     UI kit (ui_kits/card-game/kit.css :root) so the global token set stays
     clean and classifiable. */
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply by adding the class, or use as a reference for styling.
   ============================================================ */

.tb-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold);
}
.tb-h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 700; }
.tb-h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-snug); font-weight: 700; }
.tb-h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 700; }

/* Card title — the black title bar treatment from the card front */
.tb-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: var(--tracking-title);
  color: var(--fg-1);
}

.tb-body  { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); }
.tb-small { font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-body); }

/* HUD micro-label: wide-tracked uppercase, the arcane caption voice */
.tb-label {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Big MAD numeral */
.tb-stat {
  font-family: var(--font-numeric);
  font-size: var(--fs-stat);
  font-weight: 700;
  color: var(--accent-stat);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Ability keyword — underlined bold, the rulebook voice */
.tb-keyword {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}