/* ==========================================================================
   Tar Heel Tennis Camps — Design Tokens
   Single source of truth for the visual system. Mirrors design.md.
   Change a value here and it propagates everywhere.
   ========================================================================== */

:root {
  /* --- Brand (UNC core palette) --- */
  --color-carolina-blue: #4B9CD3;
  --color-navy:          #13294B;
  --color-white:         #FFFFFF;

  /* Accessible link blue (Carolina Blue fails AA on white for small text) */
  --color-link:          #2B7CB8;

  /* --- Neutrals --- */
  --color-ink:        #1A1A1A;
  --color-slate-700:  #3F4A5A;
  --color-slate-400:  #8A94A6;
  --color-border:     #E2E6EC;
  --color-surface:    #F5F7FA;

  /* --- Functional / status --- */
  --color-success: #1E8E5A;
  --color-warning: #C97A00;
  --color-error:   #C0392B;
  --color-info:    var(--color-carolina-blue);

  /* --- Typography --- */
  --font-heading: "Oswald", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-display: 2.5rem;   /* 40px mobile; scales up on desktop below */
  --text-h1:      2rem;     /* 32px */
  --text-h2:      1.5rem;   /* 24px */
  --text-h3:      1.25rem;  /* 20px */
  --text-body:    1rem;     /* 16px */
  --text-small:   0.875rem; /* 14px */

  --leading-body:    1.6;
  --leading-heading: 1.2;

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Radius --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* --- Shadow --- */
  --shadow-sm: 0 1px 2px rgba(19, 41, 75, .08);
  --shadow-md: 0 4px 12px rgba(19, 41, 75, .10);
  --shadow-lg: 0 12px 32px rgba(19, 41, 75, .14);

  /* --- Layout --- */
  --container-max: 1140px;
}

/* Larger display sizes on wider screens */
@media (min-width: 768px) {
  :root {
    --text-display: 3.5rem; /* 56px */
    --text-h1:      2.5rem; /* 40px */
    --text-h2:      1.875rem; /* 30px */
    --text-h3:      1.5rem; /* 24px */
    --text-body:    1.125rem; /* 18px */
  }
}