/* ============================================================
   RallyBase — Colors & Type
   Tennis-court discipline + coaching warmth.
   ============================================================ */

/* ---------- Google Fonts (substitutions — see README) ----------
   Display/UI Latin: Plus Jakarta Sans  (stand-in until a custom grotesk is supplied)
   Japanese:         Noto Sans JP        (primary Japanese face — the product is JP-first)
   Numeric/score:    JetBrains Mono      (tabular scoreboard numerals)
*/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ============================================================
     COLOR — Core brand
     ============================================================ */

  /* Navy — the "court at dusk" backdrop pulled from the logo. */
  --navy-950: #0F141C;   /* page ink, deepest */
  --navy-900: #151B26;   /* primary surface dark */
  --navy-800: #1C2430;   /* brand navy (logo bg) */
  --navy-700: #262F3D;   /* cards on dark */
  --navy-600: #323D4E;   /* dividers on dark */
  --navy-500: #485466;   /* muted fg on dark */

  /* Court Green — the tennis-ball accent. Used SPARINGLY as energy. */
  --court-50:  #F4FAE0;
  --court-100: #E6F4B8;
  --court-200: #D2EC82;
  --court-300: #C4E55A;
  --court-400: #B9DD36;   /* BRAND GREEN — logo ball */
  --court-500: #A2C428;
  --court-600: #86A41E;
  --court-700: #657C18;

  /* Clay — warm earth accent (tennis clay court). Secondary. */
  --clay-50:  #FCF3EC;
  --clay-100: #F7E0CF;
  --clay-200: #EFC09F;
  --clay-300: #E59B6A;
  --clay-400: #D87A3E;   /* clay accent */
  --clay-500: #B9622C;
  --clay-600: #914A20;

  /* Neutrals — "chalk on court" warm grays */
  --chalk-0:   #FFFFFF;
  --chalk-50:  #F7F8FA;
  --chalk-100: #EEF0F4;
  --chalk-200: #DDE1E8;
  --chalk-300: #C3C9D4;
  --chalk-400: #9099A8;
  --chalk-500: #6B7383;
  --chalk-600: #4D5462;
  --chalk-700: #363C47;
  --chalk-800: #242933;
  --chalk-900: #151821;

  /* ============================================================
     COLOR — Semantic
     ============================================================ */

  /* Light mode (default) */
  --bg:              var(--chalk-50);
  --bg-raised:       var(--chalk-0);
  --bg-sunken:       var(--chalk-100);

  --surface:         var(--chalk-0);
  --surface-hover:   var(--chalk-50);
  --surface-active:  var(--chalk-100);

  --fg:              var(--chalk-900);
  --fg-muted:        var(--chalk-600);
  --fg-subtle:       var(--chalk-500);
  --fg-disabled:     var(--chalk-400);
  --fg-on-dark:      var(--chalk-0);
  --fg-on-brand:     var(--navy-900);     /* text ON court-green */

  --border:          var(--chalk-200);
  --border-strong:   var(--chalk-300);
  --border-focus:    var(--court-500);

  --brand:           var(--navy-800);
  --brand-ink:       var(--navy-900);
  --accent:          var(--court-400);
  --accent-hover:    var(--court-500);
  --accent-press:    var(--court-600);

  /* Status */
  --success:         #21A26B;
  --success-bg:      #E6F7EE;
  --warning:         #E0A22E;
  --warning-bg:      #FDF3DA;
  --danger:          #D64545;
  --danger-bg:       #FCE8E8;
  --info:            #3A78E0;
  --info-bg:         #E4EEFB;

  /* Tennis-specific semantics */
  --win:             var(--court-500);     /* won point / set */
  --loss:            var(--clay-500);      /* lost point / set */
  --ace:             #2EC5FF;              /* ace highlight */
  --fault:           var(--danger);

  /* ============================================================
     RADIUS
     ============================================================ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOW  (layered, cool-navy tinted — never pure black)
     ============================================================ */
  --shadow-xs:  0 1px 2px rgba(21, 27, 38, 0.06);
  --shadow-sm:  0 1px 2px rgba(21, 27, 38, 0.06), 0 2px 4px rgba(21, 27, 38, 0.04);
  --shadow-md:  0 2px 4px rgba(21, 27, 38, 0.06), 0 8px 20px rgba(21, 27, 38, 0.08);
  --shadow-lg:  0 4px 8px rgba(21, 27, 38, 0.06), 0 16px 40px rgba(21, 27, 38, 0.12);
  --shadow-glow-accent: 0 0 0 4px rgba(185, 221, 54, 0.25);
  --shadow-inner: inset 0 1px 2px rgba(21, 27, 38, 0.06);

  /* ============================================================
     SPACING  (4px base)
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans: 'Plus Jakarta Sans', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-jp:   'Noto Sans JP', 'Plus Jakarta Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-num:  'JetBrains Mono', 'Plus Jakarta Sans', sans-serif; /* tabular score numerals */

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Type scale — compressed for mobile-first */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   64px;

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-cap:    0.08em;  /* ALL-CAPS eyebrows */

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);  /* small "ball bounce" for success states */
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
}

/* Dark mode — for in-match scoring screens & coach focus view */
[data-theme="dark"] {
  --bg:              var(--navy-950);
  --bg-raised:       var(--navy-900);
  --bg-sunken:       var(--navy-950);

  --surface:         var(--navy-800);
  --surface-hover:   var(--navy-700);
  --surface-active:  var(--navy-600);

  --fg:              var(--chalk-50);
  --fg-muted:        var(--chalk-300);
  --fg-subtle:       var(--chalk-400);
  --fg-disabled:     var(--chalk-500);
  --fg-on-dark:      var(--chalk-0);

  --border:          var(--navy-700);
  --border-strong:   var(--navy-600);

  --brand:           var(--chalk-0);
  --brand-ink:       var(--chalk-0);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

.rb-h1, h1.rb {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.rb-h2, h2.rb {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.rb-h3, h3.rb {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.rb-h4, h4.rb {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.rb-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.rb-body, p.rb {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.rb-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.rb-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.rb-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
}

.rb-score {
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}

.rb-code, code.rb {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--fg);
}

/* JP text helper — use on JP-heavy blocks for proper line-height/kerning */
.rb-jp {
  font-family: var(--font-jp);
  font-feature-settings: "palt" 1; /* proportional kana spacing */
  line-height: var(--lh-loose);
}