/* =========================================================
   THE DINKIN PROJECT — SHARED DESIGN TOKENS
   Link this file BEFORE any page-specific stylesheet.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root{

  /* ---- brand palette — industrial: black walls, navy court, concrete
     gray, white, with the pickleball itself as the one signature accent ---- */
  --ink:        #0B0D10;   /* near-black wall, primary text */
  --primary:    #1B3A63;   /* court navy blue */
  --primary-dk: #0F233F;   /* pressed / hover — deep navy */
  --primary-lt: #4E7098;   /* tints, borders on primary */
  --teal:       #565C63;   /* concrete gray — pillars & floor */
  --teal-dk:    #33383D;   /* charcoal concrete, shadowed side */
  --gold:       #2E5590;   /* signature accent for CTAs/highlights — court navy blue */
  --gold-dk:    #1B3A63;

  --cream:      #F1F2F4;   /* page background — cool concrete tint, not warm */
  --surface:    #FFFFFF;   /* cards */
  --line:       #DCDEE2;   /* hairlines, dashed kitchen-line */
  --muted:      #5B6169;   /* secondary text */
  --danger:     #B23B3B;
  --success:    #2E7D4F;

  /* ---- type ---- */
  --font-display: 'Bricolage Grotesque', 'Poppins', sans-serif;
  --font-body:    'Poppins', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- shape / depth ---- */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --shadow-sm: 0 6px 16px rgba(11,13,16,.08);
  --shadow:    0 16px 36px rgba(11,13,16,.12);
  --shadow-lg: 0 24px 60px rgba(11,13,16,.18);
}

*{ box-sizing:border-box; }

body{
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
}

::selection{ background: var(--gold); color: #fff; }

a{ color: var(--gold); }

/* ---- eyebrow / scorecard chip, used for tags & badges site-wide ---- */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px;
  border-radius:50px;
  background:#E9EBF0;
  color:var(--primary-dk);
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.chip .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
}

/* ---- the "kitchen line" divider: a nod to pickleball's dashed
   non-volley-zone line, used to separate sections deliberately ---- */
.kitchen-line{
  border:0;
  height:0;
  border-top:3px dashed var(--line);
  margin:0;
}

/* ---- dimple texture: faint dot-grid echoing a pickleball's
   perforated surface, used as ambient section texture ---- */
.dimple-bg{
  background-image: radial-gradient(var(--line) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}

/* ---- buttons ---- */
.btn{ font-family:var(--font-body); font-weight:600; border-radius:50px; padding:12px 26px; }

.btn-success{
  background:var(--primary);
  border-color:var(--primary);
}
.btn-success:hover,
.btn-success:focus{
  background:var(--primary-dk);
  border-color:var(--primary-dk);
}

.btn-outline-success{
  color:var(--primary);
  border-color:var(--primary);
}
.btn-outline-success:hover{
  background:var(--primary);
  border-color:var(--primary);
}

.btn-outline-dark{
  border-radius:50px;
  border-color:var(--ink);
  color:var(--ink);
}
.btn-outline-dark:hover{
  background:var(--ink);
  border-color:var(--ink);
}

.btn:focus-visible,
a:focus-visible,
input:focus-visible,
button:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}

/* ---- forms ---- */
.form-control,.form-select{
  border-radius:12px;
  border:1.5px solid var(--line);
  padding:11px 14px;
  font-family:var(--font-body);
}
.form-control:focus,.form-select:focus{
  border-color:var(--primary-lt);
  box-shadow:0 0 0 .2rem rgba(23,35,63,.15);
}
label{ font-weight:600; font-size:14px; color:var(--ink); margin-bottom:6px; }

/* ---- price / numeric readouts get the mono "scoreboard" face ---- */
.price, .score, .metric-card strong{
  font-family:var(--font-mono);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* =========================================================
   PUBLIC-SITE DARK THEME — arena palette
   Used only by pages that load public-theme.css (marketing
   site + booking flow). Admin/customer portals are untouched
   so their light, data-dense tables keep full contrast.
   ========================================================= */
:root{
  --pub-bg:        #05070A;   /* the arena at night — page background */
  --pub-bg-soft:   #0A0D12;   /* gradient floor stop */
  --pub-surface:   #12161D;   /* card surface */
  --pub-surface-2: #191E27;   /* raised surface — navbar, inputs, header plate */
  --pub-surface-3: #1F252F;   /* hover / active surface */
  --pub-border:    #262C36;   /* hairline on dark */
  --pub-border-soft: rgba(255,255,255,.08);
  --pub-text:      #F3F5F8;   /* primary text on dark */
  --pub-text-dim:  #9AA2AF;   /* secondary text on dark */
  --pub-text-faint:#5C636F;   /* tertiary / disabled */
  --pub-navy:      #2E5590;   /* brighter court-navy for dark backgrounds */
  --pub-navy-dk:   #1B3A63;
  --pub-lime:      #6EE7A0;   /* open / available accent */
  --pub-gold:      #2E5590;   /* CTA accent — court navy blue */
  --pub-gold-lt:   #4E86C7;   /* lighter blue for glows / gradient highlights */
}