/* First Point Gamelets — design tokens (brand frame only; game interiors keep their own palettes).
   Source of truth: brand/tokens.json · Guidelines: brand/BRAND.md
   Served at /shared/brand/tokens.css. Fonts: /shared/brand/fonts.css (self-hosted, OFL).
   Theme: light by default; dark follows prefers-color-scheme unless data-theme="light" is set,
   and data-theme="dark" forces dark on any element (e.g. a charcoal section). */

:root {
  /* ── Brand palette (fixed; do not theme) ── */
  --fp-charcoal: #1B262C;
  --fp-charcoal-deep: #141D22;
  --fp-red: #D5454A;          /* brand red: fills, marks, large display text (≥24px / ≥18.66px bold) */
  --fp-red-strong: #C0393E;   /* button fill under white text (5.39:1) */
  --fp-red-strong-hover: #A93136;
  --fp-yellow: #DFB31C;       /* accent fill; text on it = charcoal */
  --fp-lime: #B7D802;         /* accent fill only; never text on light backgrounds */
  --fp-grey: #DCDCDC;
  --fp-white: #FFFFFF;
  --fp-paper: #F6F5F2;        /* warm off-white, firstpoint.com.tr background */

  /* ── Colour roles: light ── */
  --fp-bg: #F6F5F2;
  --fp-surface: #FFFFFF;
  --fp-surface-sunken: #EFEDE8;
  --fp-surface-inverse: #1B262C;
  --fp-ink: #1B262C;          /* 14.16:1 on bg */
  --fp-ink-inverse: #F6F5F2;
  --fp-muted: #5B6770;        /* 5.32:1 on bg, 5.88:1 on surface */
  --fp-line: #E4E1DA;         /* hairlines, card borders (decorative) */
  --fp-line-strong: #8C969C;  /* input borders: 3.0:1 on surface (non-text UI) */
  --fp-accent: var(--fp-red-strong);
  --fp-accent-hover: var(--fp-red-strong-hover);
  --fp-on-accent: #FFFFFF;
  --fp-red-ink: #B23439;      /* red text/links on light: 5.59:1 on bg */
  --fp-on-red: #FFFFFF;       /* 4.39:1 on --fp-red: large text only; use --fp-red-strong for small text */
  --fp-yellow-ink: #806000;   /* yellow-family text on light: 5.36:1 */
  --fp-on-yellow: #1B262C;    /* 7.79:1 */
  --fp-lime-ink: #536600;     /* lime-family text on light: 5.89:1 (rare) */
  --fp-on-lime: #1B262C;      /* 9.44:1 */
  --fp-link: var(--fp-ink);
  --fp-focus: #1B262C;        /* focus ring colour */
  --fp-focus-ring: 0 0 0 2px var(--fp-bg), 0 0 0 4px var(--fp-focus);
  --fp-scrim: rgb(20 29 34 / 0.56);
  --fp-shadow-sm: 0 1px 2px rgb(27 38 44 / 0.06), 0 1px 1px rgb(27 38 44 / 0.04);
  --fp-shadow-md: 0 6px 20px -8px rgb(27 38 44 / 0.18), 0 2px 6px rgb(27 38 44 / 0.06);
  --fp-shadow-lg: 0 24px 48px -20px rgb(27 38 44 / 0.28), 0 4px 12px rgb(27 38 44 / 0.06);
  color-scheme: light;

  /* ── Radii ── */
  --fp-radius-xs: 4px;
  --fp-radius-sm: 8px;
  --fp-radius-md: 12px;
  --fp-radius-lg: 20px;
  --fp-radius-xl: 28px;       /* brand cards, hero panels */
  --fp-radius-pill: 999px;
  --fp-radius-icon: 22.5%;    /* game/app icons: host masks the full-bleed square */

  /* ── Spacing (4px base) ── */
  --fp-space-0: 0;
  --fp-space-1: 4px;
  --fp-space-2: 8px;
  --fp-space-3: 12px;
  --fp-space-4: 16px;
  --fp-space-5: 24px;
  --fp-space-6: 32px;
  --fp-space-7: 48px;
  --fp-space-8: 64px;
  --fp-space-9: 96px;
  --fp-space-10: 128px;
  --fp-gutter: clamp(16px, 4vw, 32px);
  --fp-container: 1120px;

  /* ── Typography ── */
  --fp-font-display: "Unbounded", "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --fp-font-ui: "Plus Jakarta Sans", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans JP", "Noto Sans SC", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fp-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fp-text-xs: 0.75rem;      /* 12 */
  --fp-text-sm: 0.875rem;     /* 14 */
  --fp-text-base: 1rem;       /* 16 */
  --fp-text-md: 1.125rem;     /* 18 */
  --fp-text-lg: 1.25rem;      /* 20 */
  --fp-text-xl: 1.5rem;       /* 24  display h4 */
  --fp-text-2xl: 1.875rem;    /* 30  display h3 */
  --fp-text-3xl: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);   /* 30→40 h2 */
  --fp-text-4xl: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);      /* 36→56 h1 */
  --fp-text-5xl: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem);    /* 44→72 hero */

  --fp-leading-tight: 1.08;   /* display */
  --fp-leading-snug: 1.25;
  --fp-leading-normal: 1.55;  /* body */
  --fp-tracking-display: -0.02em;
  --fp-tracking-caps: 0.08em; /* small caps labels (UI font, 600) */
  --fp-weight-regular: 400;
  --fp-weight-medium: 500;
  --fp-weight-semibold: 600;
  --fp-weight-bold: 700;

  /* ── Motion ── */
  --fp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --fp-dur-fast: 120ms;
  --fp-dur-base: 200ms;
  --fp-dur-slow: 320ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fp-bg: #141D22;
    --fp-surface: #1B262C;
    --fp-surface-sunken: #10171B;
    --fp-surface-inverse: #F6F5F2;
    --fp-ink: #F6F5F2;
    --fp-ink-inverse: #1B262C;
    --fp-muted: #A3AFB5;
    --fp-line: #2A3840;
    --fp-line-strong: #6B7A82;
    --fp-accent: var(--fp-red-strong);
    --fp-accent-hover: #D5454A;
    --fp-red-ink: #F07478;
    --fp-yellow-ink: #DFB31C;
    --fp-lime-ink: #B7D802;
    --fp-link: var(--fp-ink);
    --fp-focus: #DFB31C;
    --fp-scrim: rgb(10 14 17 / 0.7);
    --fp-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
    --fp-shadow-md: 0 8px 24px -10px rgb(0 0 0 / 0.5);
    --fp-shadow-lg: 0 28px 56px -24px rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --fp-bg: #141D22;
  --fp-surface: #1B262C;
  --fp-surface-sunken: #10171B;
  --fp-surface-inverse: #F6F5F2;
  --fp-ink: #F6F5F2;
  --fp-ink-inverse: #1B262C;
  --fp-muted: #A3AFB5;
  --fp-line: #2A3840;
  --fp-line-strong: #6B7A82;
  --fp-accent: var(--fp-red-strong);
  --fp-accent-hover: #D5454A;
  --fp-red-ink: #F07478;
  --fp-yellow-ink: #DFB31C;
  --fp-lime-ink: #B7D802;
  --fp-link: var(--fp-ink);
  --fp-focus: #DFB31C;
  --fp-scrim: rgb(10 14 17 / 0.7);
  --fp-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --fp-shadow-md: 0 8px 24px -10px rgb(0 0 0 / 0.5);
  --fp-shadow-lg: 0 28px 56px -24px rgb(0 0 0 / 0.6);
  color-scheme: dark;
}

[data-theme="light"] {
  --fp-bg: #F6F5F2;
  --fp-surface: #FFFFFF;
  --fp-surface-sunken: #EFEDE8;
  --fp-surface-inverse: #1B262C;
  --fp-ink: #1B262C;
  --fp-ink-inverse: #F6F5F2;
  --fp-muted: #5B6770;
  --fp-line: #E4E1DA;
  --fp-line-strong: #8C969C;
  --fp-accent: var(--fp-red-strong);
  --fp-accent-hover: var(--fp-red-strong-hover);
  --fp-red-ink: #B23439;
  --fp-yellow-ink: #806000;
  --fp-lime-ink: #536600;
  --fp-link: var(--fp-ink);
  --fp-focus: #1B262C;
  --fp-scrim: rgb(20 29 34 / 0.56);
  --fp-shadow-sm: 0 1px 2px rgb(27 38 44 / 0.06), 0 1px 1px rgb(27 38 44 / 0.04);
  --fp-shadow-md: 0 6px 20px -8px rgb(27 38 44 / 0.18), 0 2px 6px rgb(27 38 44 / 0.06);
  --fp-shadow-lg: 0 24px 48px -20px rgb(27 38 44 / 0.28), 0 4px 12px rgb(27 38 44 / 0.06);
  color-scheme: light;
}

/* Unbounded and Plus Jakarta Sans cover Latin + Latin-Ext (Turkish) only; other scripts fall
   through per character to Noto / system fonts. In non-Latin locales the wide display face would
   sit next to a different script, so headings use the UI stack at bold weight instead. */
:lang(ar), :lang(fa), :lang(ur), :lang(hi), :lang(zh), :lang(ja), :lang(ru) {
  --fp-font-display: var(--fp-font-ui);
  --fp-tracking-display: 0;
}