/* Chords design tokens — the Cross Country "ballpark leather" identity.
   Warm palette (sand/cream/brown/gold), boxy hard edges, thick borders, no
   soft shadows. Values lifted from xc_design_system/tokens/. Token *names* are
   kept from the prior SpraySync system so every consuming sheet keeps working. */

@import url("https://fonts.googleapis.com/css2?family=Yellowtail&family=Graduate&family=Barlow+Condensed:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&display=swap");

@font-face {
  font-family: "Ropest";
  src: url("../fonts/Ropest-Regular.9c2009465cb5.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Ropest";
  src: url("../fonts/Ropest-Black.28f522d29629.otf") format("opentype");
  font-weight: 900;
  font-display: swap;
}

:root {
  /* ---- Brand palette (ballpark leather) ---- */
  --app-espresso:   #2a1a10;   /* darkest brown — topbar, scoreboard grounds */
  --app-brown:      #43291a;   /* primary brown — ink, borders, section grounds */
  --app-gold:       #e2a12c;   /* signature gold accent */
  --app-cream:      #f3e9ce;   /* light cream — cards, panels */
  --app-sand:       #ecdfbe;   /* page background sand */

  /* Brown ramp */
  --app-brown-900: #2a1a10;
  --app-brown-800: #43291a;
  --app-brown-700: #4a3120;   /* body text on light */
  --app-brown-600: #5a3a22;   /* hairline borders on dark */
  --app-brown-500: #6b4327;   /* stat labels */

  /* Gold / tan ramp */
  --app-gold-600: #b07415;    /* deep gold — links, numbers */
  --app-gold-500: #9a6726;    /* muted gold — meta, kickers */
  --app-tan-400:  #c79a5e;    /* tan — subheads on dark */
  --app-tan-300:  #c7b79a;    /* muted tan — nav links, meta */
  --app-clay:     #8a5a2e;    /* clay — hairlines, muted copy */

  /* Cream ramp */
  --app-cream-100: #f3e9ce;
  --app-cream-200: #ecdfbe;
  --app-cream-300: #e2d3ae;   /* list dividers */
  --app-cream-text: #e7dac0;  /* body text on dark */

  /* ---- Legacy slate aliases (kept as names; retinted to warm neutrals) ---- */
  --app-slate-50:  #f7f0dc;
  --app-slate-100: #f3e9ce;   /* inset/panel wash → cream */
  --app-slate-200: #e2d3ae;   /* card surface → warm sand */
  --app-slate-300: #d3c19a;
  --app-slate-400: #b79a6a;
  --app-slate-500: #8a5a2e;   /* muted icons/copy → clay */
  --app-slate-600: #6b4327;
  --app-slate-700: #4a3120;   /* label ink → brown */
  --app-slate-800: #33210f;
  --app-slate-900: #2a1a10;   /* darkest ink → espresso */

  /* ---- Semantic ---- */
  --app-bg:           var(--app-sand);
  --app-bg-card:      var(--app-cream);
  --app-bg-inset:     var(--app-cream);
  --app-surface-dark: var(--app-espresso);   /* topbar, scoreboard bars */
  --app-surface-brown: var(--app-brown);
  --app-fg:           var(--app-brown);
  --app-fg-muted:     var(--app-gold-500);
  --app-fg-on-brand:  var(--app-espresso);   /* ink on gold */
  --app-fg-on-dark:   var(--app-cream-text); /* body on espresso */
  --app-border:       var(--app-brown);
  --app-border-card:  var(--app-cream);       /* cream hairline on card-on-card */

  --app-primary:      var(--app-gold);
  --app-primary-fg:   var(--app-espresso);
  --app-primary-hover: var(--app-cream);
  --app-warn:         #b06a12;
  --app-danger:       #8a2f1e;                 /* warm brick red */
  --app-info:         #6b4327;
  --app-link:         var(--app-gold-600);
  --app-link-hover:   var(--app-brown);
  --app-link-visited: var(--app-clay);

  /* ---- Border widths ---- */
  --app-border-hairline: 1px;
  --app-border-rule:     3px;   /* workhorse: section rules, card frames */
  --app-border-thick:    4px;
  --app-border-accent:   6px;   /* gold top/bottom accents between sections */
  --app-border-gold:     var(--app-gold);

  /* ---- Type ---- */
  --app-font-sans:      "Barlow", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --app-font-display:   "Ropest", cursive;                 /* the Chords wordmark */
  --app-font-collegiate:"Graduate", Georgia, serif;        /* collegiate caps: headings, numbers */
  --app-font-condensed: "Barlow Condensed", sans-serif;    /* UI labels, nav, buttons */
  --app-font-script:    "Yellowtail", cursive;             /* script signature */
  --app-font-mono:      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                        "Liberation Mono", "Courier New", monospace;

  --app-text-xs:   0.75rem;
  --app-text-sm:   0.875rem;
  --app-text-base: 1rem;
  --app-text-lg:   1.125rem;
  --app-text-xl:   1.25rem;
  --app-text-2xl:  1.5rem;
  --app-text-3xl:  1.875rem;

  --app-weight-normal: 400;
  --app-weight-medium: 500;
  --app-weight-bold:   700;
  --app-weight-black:  900;

  --app-track-label: 0.14em;   /* nav, buttons, UI labels */
  --app-track-wide:  0.26em;   /* section titles, eyebrows */

  /* ---- Geometry / shadow (boxy; no soft elevation) ---- */
  --app-radius-sm:   3px;             /* inputs, chips */
  --app-radius-md:   5px;             /* buttons, cards, modals */
  --app-radius-lg:   6px;
  --app-radius-full: 9999px;          /* only where genuinely round */

  /* Depth comes from keyline borders, not blur. */
  --app-shadow-sm: 0 0 0 1px var(--app-brown);
  --app-shadow:    0 0 0 3px var(--app-brown);
  --app-shadow-card-frame: inset 0 0 0 1px var(--app-gold);
  --app-shadow-wordmark: 0.02em 0.033em 0 var(--app-gold),
                         0.04em 0.06em 0.093em rgba(0, 0, 0, 0.45);

  /* ---- Pinstripe textures (baseball jersey) ---- */
  --app-stripe-gold: repeating-linear-gradient(
    90deg,
    rgba(226, 161, 44, 0.1) 0 1.5px,
    transparent 1.5px,
    transparent 16px
  );
  --app-stripe-brown: repeating-linear-gradient(
    90deg,
    rgba(74, 46, 26, 0.1) 0 1.5px,
    transparent 1.5px,
    transparent 16px
  );

  --app-dur-fast: 150ms;
  --app-ease: cubic-bezier(0.4, 0.1, 0.2, 1);

  /* Layout */
  --app-pad-card:    20px;
  --app-pad-card-sm: 12px;
  --app-gap:         16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--app-font-sans);
  color: var(--app-fg);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--app-gold); color: var(--app-espresso); }

/* The Chords wordmark — Ropest black with the signature gold offset shadow.
   Defined here (tokens.css is linked on every page) so it renders identically
   in the topbar (app.css) and on the login screen (auth.css). Always sits on a
   dark ground, so the fill is cream. */
.app-wordmark {
  font-family: var(--app-font-display);
  font-weight: var(--app-weight-black);
  color: var(--app-cream);
  line-height: 1;
  text-shadow: var(--app-shadow-wordmark);
}