/* =============================================================================
   TurfTime Team App — design tokens

   A separate scale from FMS on purpose. The admin tokens are tuned for dense
   desktop grids: 13px UI text, 8px radii, 4–8px cell padding, a pointer that
   can hit a 16px target. This app is a phone in one hand, often outdoors, often
   in a hurry, held by someone who is not a professional user of it. So the type
   starts at 16 and the smallest tappable thing is 44px square.

   What IS shared is the brand: each club picks a colour theme in its FMS
   (turf, ocean, slate, ember, rose, roma — app-themes.css there), and this app
   wears the same one: --tt-brand is that theme's --primary-color, --tt-rail its
   --app-rail-bg, --tt-accent its --secondary-color. The two products should look
   related, not identical.

   Everything below is a decision. Reach for a token, not a number.
   ========================================================================== */

/* Self-hosted so a sideline with one bar of signal still gets the type. The
   system stack below is the fallback if the file has not arrived yet. */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}

:root {
    color-scheme: light;

    /* --- Brand ---------------------------------------------------------- */
    --tt-brand: #166534;
    --tt-brand-strong: #0f4a26;
    --tt-brand-soft: #e6f1ea;
    --tt-brand-on: #ffffff;

    /* The dark brand surface — the desktop rail and the next-session card — and
       the bright accent that marks things on it. Same in both schemes: the FMS
       rail does not flip either. */
    --tt-rail: #0c2818;
    --tt-rail-ink: rgba(255, 255, 255, .74);
    --tt-rail-ink-faint: rgba(255, 255, 255, .6);
    --tt-accent: #4ade80;
    --tt-accent-on: #0c2818;
    --tt-accent-ink: #4ade80;

    /* --- Surfaces & text ------------------------------------------------
       Two surfaces only: the page ground, and cards sitting on it. A card
       inside a card is a bug, not a style (see FMS rule 4 — it survives the
       change of scale). */
    --tt-ground: #f5f6f3;
    --tt-surface: #ffffff;
    --tt-surface-sunken: #eceeec;
    --tt-hairline: #dfe3e0;
    --tt-hairline-strong: #c8cec9;

    --tt-ink: #14181a;
    --tt-ink-muted: #5b6560;
    --tt-ink-faint: #8b948f;
    --tt-ink-on-brand: #ffffff;

    /* --- Semantic -------------------------------------------------------
       Colour means "act on this" or "something is wrong". A normal state is
       silent, so the exceptional one carries. */
    --tt-danger: #b42318;
    --tt-danger-soft: #fdecea;
    --tt-warning: #b54708;
    --tt-warning-soft: #fdf3e7;
    --tt-success: #146c43;
    --tt-success-soft: #e7f3ec;
    /* A plain "good" blue beside success green, for scales that must not follow the club brand. */
    --tt-info: #1f63b0;

    /* WhatsApp's own action green, for the buttons that hand a family over to it. Their darker
       green, not the logo's bright one: white text on the bright one fails contrast. */
    --tt-whatsapp: #008069;
    --tt-whatsapp-strong: #006a57;
    --tt-whatsapp-soft: #e6f4f1;

    /* The three answers to "can you make it", as solid fills. Green / red /
       yellow because that is what a parent already reads at a glance; maybe is
       a true yellow, not the warning orange, with dark ink so it stays legible. */
    --tt-answer-yes: #1f8a50;
    --tt-answer-yes-on: #ffffff;
    --tt-answer-no: #c8321f;
    --tt-answer-no-on: #ffffff;
    --tt-answer-maybe: #f2c230;
    --tt-answer-maybe-on: #3a2c00;
    --tt-answer-maybe-soft: #fdf6dc;
    --tt-answer-maybe-ink: #8a6400;

    /* --- Type -----------------------------------------------------------
       16px is the floor for anything the user types into: iOS Safari zooms
       the viewport on focus for inputs below 16px, which yanks the layout
       sideways mid-form. */
    --tt-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tt-text-display: 28px;
    /* Tightened 2026-10-30 (Arnie: Home was too big and busy): title 22→20, headline 17→16,
       callout 15→14. Body stays 16px, the iOS no-zoom floor for inputs. */
    --tt-text-title: 20px;
    --tt-text-headline: 16px;
    --tt-text-body: 16px;
    --tt-text-callout: 14px;
    --tt-text-caption: 13px;
    --tt-text-micro: 12px;

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

    --tt-leading-tight: 1.2;
    --tt-leading-normal: 1.45;

    /* --- Space ----------------------------------------------------------- */
    --tt-space-1: 4px;
    --tt-space-2: 8px;
    --tt-space-3: 12px;
    --tt-space-4: 16px;
    --tt-space-5: 20px;
    --tt-space-6: 24px;
    --tt-space-8: 32px;
    --tt-space-10: 40px;

    /* The page gutter. One value, used by every screen, so nothing is
       eyeballed into near-alignment with the thing above it. */
    --tt-gutter: var(--tt-space-4);

    /* --- Shape ----------------------------------------------------------- */
    --tt-radius-sm: 10px;
    --tt-radius-md: 12px;
    --tt-radius-lg: 16px;
    --tt-radius-xl: 22px;
    --tt-radius-pill: 999px;

    /* --- Elevation -------------------------------------------------------
       Barely there. Depth comes from the hairline; the shadow only lifts
       things that genuinely float (the tab bar, a sheet). */
    --tt-shadow-card: 0 1px 2px rgba(16, 24, 20, .04), 0 4px 14px rgba(16, 24, 20, .05);
    --tt-shadow-raised: 0 -1px 0 var(--tt-hairline), 0 -8px 24px rgba(20, 24, 26, .06);
    --tt-shadow-sheet: 0 -4px 32px rgba(20, 24, 26, .18);

    /* --- Touch -----------------------------------------------------------
       44px is the Apple HIG minimum and the number the App Store review
       actually checks. Nothing interactive goes below it. */
    --tt-tap: 44px;
    --tt-tap-lg: 52px;

    /* --- Chrome ---------------------------------------------------------- */
    --tt-appbar-height: 56px;
    --tt-tabbar-height: 56px;

    /* The notch, the home indicator, and the rounded corners. Zero in a
       browser, real on a phone; every fixed edge adds these. */
    --tt-safe-top: env(safe-area-inset-top, 0px);
    --tt-safe-bottom: env(safe-area-inset-bottom, 0px);
    --tt-safe-left: env(safe-area-inset-left, 0px);
    --tt-safe-right: env(safe-area-inset-right, 0px);

    /* --- Motion ----------------------------------------------------------- */
    --tt-duration-fast: 120ms;
    --tt-duration: 180ms;
    --tt-ease: cubic-bezier(.2, .8, .3, 1);

    --tt-focus-ring: 0 0 0 3px color-mix(in srgb, var(--tt-brand) 28%, transparent);
}

/* Dark mode is not a nicety on a phone — it is the default appearance for a
   large share of users, and a white-only app announces itself as a web page
   in a wrapper. Only the palette flips; every scale above is shared.

   Keyed off data-theme rather than @media (prefers-color-scheme: dark), because
   the phone's setting is not the last word: Account → Appearance can pin either
   scheme for this device, and a media query has no way to lose that argument.
   The inline script in index.html resolves the two into data-theme before the
   first paint, and re-resolves when the phone flips scheme mid-session. So the
   palette is written once here, not once per condition. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --tt-brand: #3fa063;
    --tt-brand-strong: #58b87a;
    --tt-brand-soft: #17241c;
    --tt-brand-on: #08130c;

    --tt-ground: #0f1311;
    --tt-surface: #171c19;
    --tt-surface-sunken: #202724;
    --tt-hairline: #2a322d;
    --tt-hairline-strong: #3a443e;

    --tt-ink: #eef2ef;
    --tt-ink-muted: #a3aea8;
    --tt-ink-faint: #7c8781;
    --tt-ink-on-brand: #08130c;

    --tt-danger: #f2857a;
    --tt-danger-soft: #2c1613;
    --tt-warning: #e8a56a;
    --tt-warning-soft: #2b1d10;
    --tt-success: #62c48d;
    --tt-success-soft: #12251a;
    --tt-info: #7fb2ea;

    --tt-whatsapp: #008069;
    --tt-whatsapp-strong: #00957a;
    --tt-whatsapp-soft: #0f2722;

    --tt-answer-yes: #3fae6e;
    --tt-answer-yes-on: #06140b;
    --tt-answer-no: #e2685b;
    --tt-answer-no-on: #1a0704;
    --tt-answer-maybe: #e9bd3a;
    --tt-answer-maybe-on: #2a1f00;
    --tt-answer-maybe-soft: #2a2410;
    --tt-answer-maybe-ink: #ecc95c;

    --tt-shadow-card: none;
    --tt-shadow-raised: 0 -1px 0 var(--tt-hairline);
    --tt-shadow-sheet: 0 -4px 32px rgba(0, 0, 0, .5);

    --tt-focus-ring: 0 0 0 3px color-mix(in srgb, var(--tt-brand) 35%, transparent);
}

/* --- Club colour themes ------------------------------------------------------
   data-club-theme is the club's FMS theme, set by the inline script in
   index.html. Turf is the default above, so it needs no block. Light values are
   the FMS theme's own; the dark ones are lifted until they read on the dark
   ground, the same way turf's #3fa063 is. Only brand, rail and accent change —
   surfaces, ink and the semantic colours stay put, so a danger red never
   becomes the brand. */
:root[data-club-theme="ocean"] {
    --tt-brand: #0c4a6e; --tt-brand-strong: #082f49; --tt-brand-soft: #e3eff6;
    --tt-rail: #051e2c; --tt-accent: #38bdf8; --tt-accent-on: #051e2c; --tt-accent-ink: #38bdf8;
}
:root[data-club-theme="slate"] {
    --tt-brand: #334155; --tt-brand-strong: #1e293b; --tt-brand-soft: #e9edf2;
    --tt-rail: #0b1220; --tt-accent: #94a3b8; --tt-accent-on: #0b1220; --tt-accent-ink: #b6c2d1;
}
:root[data-club-theme="ember"] {
    --tt-brand: #9e2718; --tt-brand-strong: #7c2d12; --tt-brand-soft: #f8e9e6;
    --tt-rail: #431407; --tt-accent: #fb923c; --tt-accent-on: #431407; --tt-accent-ink: #fb923c;
}
:root[data-club-theme="rose"] {
    --tt-brand: #6b1428; --tt-brand-strong: #4a0e1c; --tt-brand-soft: #f6e7eb;
    --tt-rail: #2d0710; --tt-accent: #c73d5c; --tt-accent-on: #ffffff; --tt-accent-ink: #ec8ca2;
}
:root[data-club-theme="roma"] {
    --tt-brand: #8e1f2f; --tt-brand-strong: #5a1320; --tt-brand-soft: #f7e8ea;
    --tt-rail: #401017; --tt-accent: #f0bc42; --tt-accent-on: #401017; --tt-accent-ink: #f0bc42;
}

:root[data-theme="dark"][data-club-theme="ocean"] {
    --tt-brand: #3b9fd6; --tt-brand-strong: #5cb4e4; --tt-brand-soft: #12212b; --tt-brand-on: #06121a; --tt-ink-on-brand: #06121a;
}
:root[data-theme="dark"][data-club-theme="slate"] {
    --tt-brand: #8a9ab0; --tt-brand-strong: #a6b3c4; --tt-brand-soft: #1b2029; --tt-brand-on: #0b1220; --tt-ink-on-brand: #0b1220;
}
:root[data-theme="dark"][data-club-theme="ember"] {
    --tt-brand: #e2694f; --tt-brand-strong: #ec8873; --tt-brand-soft: #2a1612; --tt-brand-on: #1a0905; --tt-ink-on-brand: #1a0905;
}
:root[data-theme="dark"][data-club-theme="rose"] {
    --tt-brand: #d4637d; --tt-brand-strong: #e08299; --tt-brand-soft: #2a1219; --tt-brand-on: #1a060c; --tt-ink-on-brand: #1a060c;
}
:root[data-theme="dark"][data-club-theme="roma"] {
    --tt-brand: #d9606f; --tt-brand-strong: #e5808c; --tt-brand-soft: #2a1417; --tt-brand-on: #1a0709; --tt-ink-on-brand: #1a0709;
}