/* 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");
}

: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: signal -------------------------------------------------- */
  --ff-action: #a9f04d;                       /* the one primary action; under par */
  --ff-action-press: #bcff68;
  --ff-gold: #e8b94f;                         /* selection and achievement only */
  --ff-info: #86dcff;
  --ff-warn: #ffb65c;
  --ff-danger: #ff9f9f;
  --ff-over: #ff8a7a;                         /* over par */
  --ff-focus: #ffffff;

  /* ---- 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);

  /* ---- 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;

  /* ---- 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-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 ---------------------------------------------- */
  --ff-mark-sm: 26px;                         /* score mark in a scorecard cell */
  --ff-mark-lg: 48px;                         /* score mark in a result chip */
  --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-score-map: 50;
  --ff-z-sheet: 60;
  --ff-z-card: 70;
  --ff-z-notice: 80;
  --ff-z-veil: 90;
}