/* ============================================================
   CourtFlow — Design Tokens
   Source of truth for colors and type.

   Used by:  courtflow-web  (marketing site, courtflowsa.com)
             courtflow-app  (product, app.courtflowsa.com)

   Duplicated in both repos. Change it in one, change it in both.
   Nothing here should ever be hardcoded in a component.

   The app uses Tailwind and mirrors these values in
   tailwind.config.ts — see the block at the bottom.
   ============================================================ */

:root {

  /* ---- BRAND -------------------------------------------------
     From the logo SVG. These travel everywhere: app, website,
     deck, print, signage.
     ------------------------------------------------------------ */

  --cf-navy:   #163075;   /* headings, footer bg, buttons, logo body */
  --cf-lime:   #D1FB1A;   /* accent only — see rule below */
  --cf-white:  #FFFFFF;   /* knockouts: logo on navy, text on navy */

  /* RULE: lime is never text on a light background.
     Lime on cream measures 1.1:1 — effectively invisible.
     Lime is a fill, a highlight, a paddle.
     Lime on navy is 10.2:1 and fine. */

  /* Channel values, for alpha use. Write rgba(var(--cf-navy-rgb), .06)
     rather than hardcoding the channels or reaching for color-mix. */
  --cf-navy-rgb: 22, 48, 117;
  --cf-lime-rgb: 209, 251, 26;
  --cf-cream-rgb: 245, 245, 243;
  --cf-white-rgb: 255, 255, 255;
  --cf-line-rgb: 228, 231, 236;
  --cf-mute-rgb: 90, 107, 130;


  /* ---- INTERFACE ---------------------------------------------
     Screen only. Never send these to a printer or a Pantone spec.
     ------------------------------------------------------------ */

  --cf-cream:  #F5F5F3;   /* page background — web + app (white cards sit on it) */
  --cf-mute:   #5A6B82;   /* secondary text, captions, placeholders */
  --cf-line:   #E4E7EC;   /* borders, dividers, input outlines */


  /* ---- DERIVED NAVY ------------------------------------------
     Three steps. Do not add a fourth without a use case the
     base tokens can't cover.
     ------------------------------------------------------------ */

  --cf-navy-900: #0E1E49;   /* deep sections, pressed states    14.8:1 on cream */
  --cf-navy-600: #495E93;   /* hovers, secondary surfaces        5.8:1 on cream */
  --cf-navy-300: #96A2C1;   /* muted text ON navy                4.8:1 on navy  */
  --cf-lime-300: #EAFD98;   /* pale lime — large fills only, never text */


  /* ---- TYPE --------------------------------------------------
     Inter does the work. Toxigenesis is display only and falls
     back to Inter on the web (we hold a desktop licence, not a
     webfont one — the logo is outlined SVG, which is covered).
     Arabic token is defined but unused until Arabic ships.
     ------------------------------------------------------------ */

  --cf-font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --cf-font-display: 'Toxigenesis', 'Inter', system-ui, sans-serif;
  --cf-font-arabic:  'IBM Plex Sans Arabic', system-ui, sans-serif;

  --cf-text-xs:   0.75rem;    /* 12 */
  --cf-text-sm:   0.875rem;   /* 14 */
  --cf-text-base: 1rem;       /* 16 — never smaller on inputs, iOS zooms */
  --cf-text-lg:   1.125rem;   /* 18 */
  --cf-text-xl:   1.5rem;     /* 24 */
  --cf-text-2xl:  2rem;       /* 32 */
  --cf-text-3xl:  2.875rem;   /* 46 */

  --cf-weight-regular:  400;
  --cf-weight-medium:   500;
  --cf-weight-semibold: 600;
  --cf-weight-bold:     700;

  --cf-leading-tight:  1.15;
  --cf-leading-normal: 1.5;
  --cf-leading-loose:  1.6;


  /* ---- SPACING & SHAPE ---------------------------------------- */

  --cf-space-1:  0.25rem;
  --cf-space-2:  0.5rem;
  --cf-space-3:  0.75rem;
  --cf-space-4:  1rem;
  --cf-space-6:  1.5rem;
  --cf-space-8:  2rem;
  --cf-space-12: 3rem;
  --cf-space-16: 4rem;
  --cf-space-24: 6rem;

  --cf-radius-sm:   6px;
  --cf-radius-md:   12px;
  --cf-radius-lg:   20px;
  --cf-radius-full: 9999px;

  --cf-shadow-sm: 0 1px 2px rgba(22, 48, 117, 0.06);
  --cf-shadow-md: 0 4px 16px rgba(22, 48, 117, 0.08);
  --cf-shadow-lg: 0 12px 40px rgba(22, 48, 117, 0.12);
}


/* ============================================================
   BASE LAYER

   courtflow-web: keep this.
   courtflow-app: DELETE everything below this line — Tailwind
   Preflight already handles it and the two will conflict.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cf-cream);
  color: var(--cf-navy);
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-base);
  line-height: var(--cf-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2 {
  font-family: var(--cf-font-display);
  line-height: var(--cf-leading-tight);
  font-weight: var(--cf-weight-bold);
  margin: 0 0 var(--cf-space-4);
}

h3, h4, h5, h6 {
  line-height: var(--cf-leading-tight);
  font-weight: var(--cf-weight-semibold);
  margin: 0 0 var(--cf-space-3);
}

h1 { font-size: var(--cf-text-3xl); }
h2 { font-size: var(--cf-text-2xl); }
h3 { font-size: var(--cf-text-xl); }

p { margin: 0 0 var(--cf-space-4); }

a {
  color: inherit;
  text-decoration: none;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, textarea, select, button {
  font: inherit;
  color: inherit;
}

input, textarea, select {
  font-size: var(--cf-text-base);   /* prevents iOS zoom on focus */
  background: var(--cf-white);
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius-sm);
  padding: var(--cf-space-3);
  width: 100%;
}

input::placeholder, textarea::placeholder { color: var(--cf-mute); }

button { cursor: pointer; }

::selection {
  background: var(--cf-lime);
  color: var(--cf-navy);
}

:focus-visible {
  outline: 2px solid var(--cf-navy);
  outline-offset: 2px;
}

/* A navy ring is invisible on a navy section. Lime is 10.2:1 there, and a
   focus ring is a ring, not text, so the lime-on-light rule does not apply. */
.cf-on-navy :focus-visible {
  outline-color: var(--cf-lime);
}

/* Skip link — visible only on keyboard focus */
.cf-skip {
  position: absolute;
  left: -9999px;
}
.cf-skip:focus {
  left: var(--cf-space-4);
  top: var(--cf-space-4);
  z-index: 999;
  padding: var(--cf-space-3) var(--cf-space-4);
  background: var(--cf-navy);
  color: var(--cf-white);
  border-radius: var(--cf-radius-sm);
}

/* Visually hidden but read by screen readers — use on form labels */
.cf-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sections with a navy background — flips text to knockout */
.cf-on-navy {
  background: var(--cf-navy);
  color: var(--cf-white);
}
.cf-on-navy .cf-secondary { color: var(--cf-navy-300); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 900px) {
  :root {
    --cf-text-3xl: 2.25rem;   /* 36 */
    --cf-text-2xl: 1.75rem;   /* 28 */
  }
}


/* ============================================================
   TAILWIND MIRROR — courtflow-app

   Tailwind can't read CSS custom properties at config time, so
   the hex values are duplicated in tailwind.config.ts. If the
   two ever disagree, THIS FILE WINS.

   theme: {
     extend: {
       colors: {
         navy:  { DEFAULT: '#163075', 900: '#0E1E49',
                  600: '#495E93', 300: '#96A2C1' },
         lime:  { DEFAULT: '#D1FB1A', 300: '#EAFD98' },
         cream: '#F5F5F3',
         mute:  '#5A6B82',
         line:  '#E4E7EC',
       },
       fontFamily: {
         sans:    ['Inter', 'system-ui', 'sans-serif'],
         display: ['Toxigenesis', 'Inter', 'sans-serif'],
       },
     },
   }

   The app config currently has #162F74 / #D0FA1A. Both wrong.
   ============================================================ */