/* FairwayFinda Caddy — design tokens.
   Canon: the landing site (ff_website/public/styles.css, WEBSITE_SPEC.md §5).
   This sheet holds @font-face and :root custom properties only. Every value a
   component needs lives here; ff-components.css contains no raw colours or sizes.

   Sunlight rule: text never sits on translucency or on the bare 3D scene.
   A text-bearing surface is opaque, or --ff-scrim (.92 alpha) at the lightest.

   Breakpoints (custom properties cannot be used in media queries, so these are
   the literal values to write):
     375px  small phone        @media (min-width: 375px)
     430px  large phone, the design target
     768px  tablet portrait and up
     short landscape           @media (orientation: landscape) and (max-height: 480px)
*/

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("font/manrope-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("font/dm-sans-latin-var.woff2") format("woff2");
}

/* The round card's big figures: hole, par and distance, set heavy and italic. */
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 800 900;
  font-display: swap;
  src: url("font/inter-italic-latin-var.woff2") format("woff2");
}

:root {
  /* ---- Colour: surfaces ------------------------------------------------ */
  --ff-ink: #07110e;                          /* page ground; text on lime, paper and gold */
  --ff-surface: #0c1b16;                      /* cards, sheets, rows */
  --ff-surface-raised: #153326;               /* pressed / lifted surface, tiles */
  --ff-scrim: rgba(7, 17, 14, 0.92);          /* lightest ground text may sit on over the scene */
  --ff-backdrop: rgba(7, 17, 14, 0.64);       /* dims the scene behind a sheet; never carries text */

  /* ---- Colour: text ---------------------------------------------------- */
  --ff-paper: #f3f0e8;                        /* primary text; the "known / chosen" fill */
  --ff-paper-press: #e7e2d6;                  /* paper while pressed */
  --ff-text-2: rgba(243, 240, 232, 0.72);     /* secondary text */
  --ff-text-3: rgba(243, 240, 232, 0.56);     /* the floor — nothing fainter */

  /* ---- Colour: lines --------------------------------------------------- */
  --ff-line: rgba(255, 255, 255, 0.14);       /* dividers and resting surface edges */
  --ff-line-control: rgba(255, 255, 255, 0.4);/* edges of things you can press */

  /* ---- Colour: the Courses map (ui/course-map.js) ------------------------- */
  --ff-map-sea: var(--ff-ink);                /* sea and inland water: the darkest ground */
  --ff-map-land: var(--ff-surface-raised);
  --ff-map-coast: var(--ff-line-control);     /* the coast, hairline */
  --ff-map-urban: color-mix(in srgb, var(--ff-paper) 9%, transparent);
  --ff-map-water-line: color-mix(in srgb, var(--ff-info) 55%, transparent); /* rivers */
  --ff-map-road: color-mix(in srgb, var(--ff-paper) 28%, transparent);
  --ff-map-road-major: color-mix(in srgb, var(--ff-paper) 48%, transparent);
  --ff-map-label: var(--ff-text-2);           /* place names */
  --ff-map-label-course: var(--ff-paper);     /* course names */
  --ff-map-halo: var(--ff-scrim);             /* behind every label, so it reads in sunlight */

  /* ---- Colour: signal -------------------------------------------------- */
  --ff-action: #a9f04d;                       /* the one primary action; under par */
  --ff-action-press: #bcff68;
  --ff-gold: #e8b94f;                         /* selection and achievement only */
  --ff-gold-glow: rgba(232, 185, 79, 0.45);   /* the pulse inviting a one-tap confirm */
  --ff-gold-glow-out: rgba(232, 185, 79, 0);  /* the same pulse, faded */
  --ff-info: #86dcff;
  --ff-warn: #ffb65c;
  --ff-danger: #ff9f9f;
  --ff-over: #ff8a7a;                         /* over par */
  --ff-focus: #ffffff;
  /* The Status mark (ff-components.css): a function's state in the player app guide, computed from its checks. */
  --ff-status-green: var(--ff-action);        /* proven by its checks now */
  --ff-status-pending: var(--ff-warn);        /* asked for, not yet proven */
  --ff-status-red: var(--ff-danger);          /* its proof fails */

  /* ---- Colour: reach (the Privacy rings) ------------------------------- */
  --ff-reach-score: var(--ff-action);         /* who sees the score: the rings filled up to the setting */
  --ff-reach-score-fill: color-mix(in srgb, var(--ff-action) 30%, transparent);
  --ff-reach-contact: var(--ff-info);         /* who can contact you: the bold outline at the setting */

  /* ---- Colour: score vs par. Shape carries the state first, colour second,
          and a signed label is always present. ------------------------------ */
  --ff-score-under: var(--ff-action);
  --ff-score-par: var(--ff-paper);
  --ff-score-over: var(--ff-over);
  --ff-score-unknown: var(--ff-text-3);
  /* The scorecard standard: the score page's mark (.club-mark, ff-components.css), the one way a score is
     drawn everywhere, cards, summaries, maps and shot dots (operator, 2026-10-31). The figure sits
     inside the mark; a par is a white disc with a black figure, seen on dark ground and lost on white
     (operator, 2026-11-01); a pick-up reads as a double. */
  --ff-scorecard-figure: #fff;
  --ff-scorecard-eagle: #10b981;                /* green disc: eagle or better */
  --ff-scorecard-birdie: #f43f5e;               /* rose disc */
  --ff-scorecard-par: var(--ff-scorecard-figure);  /* white disc */
  --ff-scorecard-par-figure: var(--ff-ink);      /* its black figure */
  --ff-scorecard-bogey: #3b82f6;                /* blue tile */
  --ff-scorecard-double: #1e293b;               /* dark tile: double bogey or worse, a pick-up */
  --ff-scorecard-double-rule: #94a3b8;          /* its double rule */
  /* A tee shot's dot on the hole: the round's points on that hole, no figure (operator, 2026-11-01:
     "white dot for 2pts, red for 3pts, blue 1pt, 0no points black or pickup. No numbers just dots"),
     the card's printed Stableford points; a net stroke round's per-hole points once the hub publishes
     them (UNMET D4). */
  --ff-points-4: var(--ff-scorecard-eagle);      /* four or more */
  --ff-points-3: var(--ff-scorecard-birdie);     /* red */
  --ff-points-2: var(--ff-scorecard-par);        /* white */
  --ff-points-1: var(--ff-scorecard-bogey);      /* blue */
  --ff-points-0: var(--ff-ink);                  /* black: no points, or a pick-up */
  --ff-points-none: var(--ff-text-3);            /* a card that prints neither */

  /* ---- Colour: map markers. Nothing lime on the map. -------------------- */
  --ff-marker-fill: var(--ff-paper);          /* confirmed disc */
  --ff-marker-hollow: var(--ff-scrim);        /* estimated / unlocated disc */
  --ff-marker-ink: var(--ff-ink);
  --ff-marker-halo: rgba(7, 17, 14, 0.72);    /* ink halo behind every marker */
  --ff-marker-select: var(--ff-gold);
  --ff-marker-ring: 2px;
  --ff-marker-select-width: 3px;
  --ff-marker-dash: 4 3;                      /* estimated ring */
  --ff-marker-dot: 0.1 4;                     /* unlocated ring (round caps) */
  --ff-marker-unlocated-opacity: 0.6;
  --ff-marker-selected-scale: 1.12;
  --ff-connector-width: 2px;
  --ff-connector-casing-width: 5px;
  --ff-connector-dash: 6 5;

  /* ---- Colour: the hole's own ground (the drawn hole and its green view) - */
  --ff-hole-cut: #3e7d3a;                     /* the first cut around the fairway and green */
  --ff-hole-tee: #62b552;                     /* the tee box */
  --ff-hole-tee-edge: var(--ff-line-control);
  --ff-hole-fringe: #5db14c;                  /* the collar round the green */
  --ff-hole-pole: var(--ff-paper);            /* the flagstick */
  --ff-hole-flag: var(--ff-gold);
  --ff-hole-cup: var(--ff-ink);
  --ff-hole-greenview: rgba(7, 17, 14, 0.97); /* the green view's ground over the hole */

  /* ---- Colour: figures painted on the ground (On Course (4.5)) --------- */
  --ff-ground-ink: var(--ff-paper);           /* a distance painted flat on the hole */
  --ff-ground-case: var(--ff-ink);            /* its dark edge, laid under the fill (paint-order) */
  --ff-ground-reach: var(--ff-paper-press);   /* a hazard's reach, under its carry */
  --ff-ground-water: var(--ff-info);          /* a water area's figures */
  --ff-ground-aim: var(--ff-gold);            /* the aim ring: the one thing chosen on the hole */
  /* ---- On Course (4.5): Caddy's On Course measures (oncourse/on-course.css) -- */
  --ff-oc-rail-width: 46px;                   /* the rail down the left: flag, track, ball */
  --ff-oc-rail-track: 6px;
  --ff-oc-rail-thumb: 26px;
  --ff-oc-rail-tick: 22px;
  --ff-oc-rail-fill: var(--ff-action);        /* the rail filled from the ball up to the thumb */
  --ff-oc-map-width: 88px;                    /* the Score map inset */
  --ff-oc-map-height: 178px;
  --ff-oc-puck: 46px;                         /* a club in the bag wheel */
  --ff-oc-wheel-height: 104px;
  --ff-oc-hold: 72px;                         /* the hold-to-log ring */
  --ff-oc-column: 184px;                      /* short landscape: each edge column of controls */
  --ff-oc-wheel-width: 88px;                  /* short landscape: the bag wheel stood upright */
  --ff-3d-sky: var(--ff-info);                /* On Course's daylight sky overhead (world.js) */
  --ff-3d-horizon: var(--ff-paper);           /* its horizon */
  --ff-3d-haze: var(--ff-paper-press);        /* the haze the far land fades into */
  --ff-position-disc: var(--ff-info);         /* the fix's accuracy, a soft disc on the ground */
  --ff-position-disc-opacity: 0.2;
  --ff-position-edge-opacity: 0.55;

  /* ---- Colour: the green's slope (the Score map, On Course (4.5)) ------ */
  /* Caddy's four grade bands, each arrow and legend swatch in its band's colour. */
  --ff-slope-0: var(--ff-info);               /* under 1 % */
  --ff-slope-1: var(--ff-paper);              /* 1 to 2.5 % */
  --ff-slope-2: var(--ff-gold);               /* 2.5 to 4.5 % */
  --ff-slope-3: var(--ff-over);               /* steeper than 4.5 % */
  --ff-slope-width: 2.6px;                    /* an arrow's stroke */
  --ff-slope-opacity: 1;
  --ff-slope-case: var(--ff-ink);             /* the casing under each arrow, so it reads on any green */
  --ff-slope-case-width: 5.4px;
  --ff-slope-case-opacity: 0.7;
  --ff-slope-travel: 9px;                     /* how far an arrow drifts downhill each way */
  --ff-slope-drift-0: 4.2s;                   /* one drift, by band: the steeper, the faster */
  --ff-slope-drift-1: 3s;
  --ff-slope-drift-2: 2.1s;
  --ff-slope-drift-3: 1.4s;

  /* ---- Colour: the golfer's planned target (the hole scoring screen) ---- */
  --ff-plan: var(--ff-paper);                 /* the crosshair, faint */
  --ff-plan-opacity: 0.6;
  --ff-plan-size: 40px;

  /* ---- Type ------------------------------------------------------------ */
  --ff-font-display: "Manrope", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-font-ui: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-font-figure: "Inter", "Manrope", system-ui, -apple-system, sans-serif;
  --ff-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* a build id */
  --ff-weight-display: 600;                   /* Manrope: headings and every numeral */
  --ff-weight-ui: 500;
  --ff-weight-strong: 700;
  --ff-weight-heavy: 800;                     /* eyebrows, button labels */

  --ff-size-12: 0.75rem;                      /* eyebrows and labels only */
  --ff-size-14: 0.875rem;                     /* floor for data */
  --ff-size-16: 1rem;
  --ff-size-20: 1.25rem;
  --ff-size-24: 1.5rem;
  --ff-size-32: 2rem;
  --ff-size-44: 2.75rem;

  --ff-leading-display: 1;
  --ff-leading-tight: 1.2;
  --ff-leading-body: 1.45;

  --ff-tracking-display: -0.045em;            /* 32 and 44 */
  --ff-tracking-heading: -0.025em;            /* 20 and 24 */
  --ff-tracking-normal: 0;
  --ff-tracking-label: 0.08em;                /* uppercase button and chip labels */
  --ff-tracking-eyebrow: 0.16em;              /* uppercase 12px eyebrows */
  --ff-numeric: tabular-nums lining-nums;

  /* ---- Space ----------------------------------------------------------- */
  --ff-space-4: 4px;
  --ff-space-8: 8px;
  --ff-space-12: 12px;
  --ff-space-16: 16px;
  --ff-space-24: 24px;
  --ff-space-32: 32px;
  --ff-space-48: 48px;

  /* ---- Radius ---------------------------------------------------------- */
  --ff-radius-8: 8px;
  --ff-radius-12: 12px;
  --ff-radius-16: 16px;
  --ff-radius-24: 24px;
  --ff-radius-pill: 999px;

  /* ---- Elevation. No glows. --------------------------------------------- */
  --ff-e0: inset 0 0 0 1px var(--ff-line);
  --ff-e1: 0 2px 8px rgba(0, 0, 0, 0.45);
  --ff-e2: 0 12px 40px rgba(0, 0, 0, 0.5);
  --ff-blur: 18px;                            /* the one scrim blur */

  /* ---- Rings ----------------------------------------------------------- */
  --ff-border: 1px;
  --ff-border-strong: 2px;
  --ff-focus-width: 3px;
  --ff-focus-offset: 2px;
  --ff-focus-gap: 0 0 0 2px var(--ff-ink);    /* ink gap under the white ring */
  --ff-select-ring: 0 0 0 2px var(--ff-ink), 0 0 0 4px var(--ff-gold);
  --ff-select-ring-focus: 0 0 0 2px var(--ff-ink), 0 0 0 4px var(--ff-gold), 0 0 0 6px var(--ff-ink);
  --ff-focus-offset-selected: 6px;         /* the white ring clears the gold one */

  /* ---- Motion ---------------------------------------------------------- */
  --ff-dur-press: 120ms;
  --ff-dur-state: 200ms;
  --ff-dur-enter: 250ms;
  --ff-dur-exit: 160ms;
  --ff-dur-spin: 800ms;
  --ff-ease-state: ease;
  --ff-ease-enter: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ff-ease-exit: ease-in;
  --ff-press-scale: 0.96;

  /* ---- Touch ----------------------------------------------------------- */
  --ff-touch-min: 44px;
  --ff-touch-primary: 56px;
  --ff-touch-gap: 8px;

  /* ---- Component measures ---------------------------------------------- */
  /* The score mark (ff-components.css "Score mark", .club-mark) */
  --ff-mark-xs: 23px;                         /* base size */
  --ff-hist-pad: 9px 12px 10px;               /* the History band (ff-components.css) */
  --ff-hist-label: 10px;
  --ff-hist-avg: 34px;
  --ff-hist-rel: 13px;
  --ff-hist-note: 9px;
  --ff-hist-col-gap: 5px;
  --ff-hist-row-gap: 6px;
  --ff-hist-bar-mark: 18px;                   /* its marks inline in On Course's bottom bar */
  --ff-hist-bar-avg: var(--ff-size-16);
  --ff-mark-cell: 24px;                       /* the nines across; the band on the narrowest card */
  --ff-mark-sm: 26px;                         /* the band on a narrow card */
  --ff-mark-md: 28px;                         /* the hole card's band */
  --ff-mark-lg: 30px;                         /* a hole to a row; the round's tally */
  --ff-mark-xl: 44px;                         /* the hole screen's banner */
  --ff-mark-figure-13: 13px;                  /* the figure inside, by mark size */
  --ff-mark-figure-14: 14px;
  --ff-mark-figure-15: 15px;
  --ff-mark-figure-16: 16px;
  --ff-mark-figure-22: 22px;
  --ff-mark-radius: 4px;                      /* a tile's corner */
  --ff-mark-rule: 3px;                        /* the double rule of double bogey or worse */
  --ff-glyph: 24px;                           /* icons, swatches, notice glyphs */
  --ff-handle-width: 40px;
  --ff-handle-height: 4px;
  --ff-measure: 420px;                        /* widest a toast, sheet or block grows */

  /* ---- Safe area ------------------------------------------------------- */
  --ff-safe-top: env(safe-area-inset-top, 0px);
  --ff-safe-right: env(safe-area-inset-right, 0px);
  --ff-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ff-safe-left: env(safe-area-inset-left, 0px);

  /* ---- Layers ---------------------------------------------------------- */
  --ff-z-scene: 0;
  --ff-z-world-labels: 10;
  --ff-z-hud: 20;
  --ff-z-gesture: 30;
  --ff-z-hud-priority: 40;
  --ff-z-sheet: 60;
  --ff-z-card: 70;
  --ff-z-notice: 80;
  --ff-z-veil: 90;
}