/* Donpa design system — tokens */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap');

/* ---- fonts ---- */
/* Display face: Baloo 2 — SUBSTITUTION for the DonPa wordmark's custom 3D lettering (no font files provided).
   UI face: the app is Expo/React Native and uses the platform system font (SF Pro on iOS, Roboto on Android). */
:root{
  --font-display:'Baloo 2','Nunito',system-ui,sans-serif;
  /* No webfont: the app uses whatever the platform provides. -apple-system / BlinkMacSystemFont
     already resolve to SF Pro on Apple platforms, Roboto on Android — so no family is named that
     would need an @font-face. */
  --font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,monospace;
}

/* ---- colors ---- */
:root{
  /* --- Brand gradient (BrandGradient, theme.ts) : diagonal fuchsia -> blue.
     Used on EVERY primary action button, in app screens and inside games. --- */
  --brand-fuchsia:#EC1E8C;
  --brand-blue:#4B2FE0;
  --gradient-brand:linear-gradient(120deg,var(--brand-fuchsia) 0%,var(--brand-blue) 100%);
  --gradient-brand-soft:linear-gradient(120deg,rgba(236,30,140,.22) 0%,rgba(75,47,224,.22) 100%); /* @kind color */

  /* --- App background (AppBackgroundGradient) : top -> bottom --- */
  --bg-top:#0A1224;
  --bg-bottom:#111B33;
  --gradient-app:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%);
  /* In-game screens sit on a plum wash derived from the game colour */
  --gradient-game:linear-gradient(180deg,#25091C 0%,#1A0A2A 100%); /* @kind color */

  /* --- Dark palette (Colors.dark — the only active theme) --- */
  --background:#0A1224;
  --surface:#212225;           /* backgroundElement */
  --surface-selected:#2E3135;  /* backgroundSelected */
  --text:#FFFFFF;
  --text-secondary:#B0B4BA;
  --text-tertiary:rgba(255,255,255,.45);

  /* --- Currency / rewards --- */
  --jeton-gold:#FFD34E;

  /* --- Per-game accents (GameManifest.color) --- */
  --game-cards:#F27DB0;   /* Picolo, Jamais, Susceptible, Tu préfères, Action ou vérité */
  --game-role:#7C3AED;    /* Secret Role, Chooser */
  --game-timer:#5DCAA5;   /* Time's Up */

  /* --- Tier signalling (soft / spicy / hard) --- */
  --tier-soft:#F472B6;
  --tier-spicy:#E11D6B;
  --tier-hard:#7C3AED;

  /* --- Semantic aliases --- */
  --text-body:var(--text-secondary);
  --text-heading:var(--text);
  --surface-card:rgba(255,255,255,.05);
  --surface-card-solid:var(--surface);
  --surface-input:rgba(255,255,255,.06);
  --border-hairline:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.18);
  --accent-interactive:var(--brand-fuchsia);
  --focus-ring:rgba(236,30,140,.55);
  --scrim:rgba(4,7,16,.72);
}

/* ---- typography ---- */
:root{
  /* Display — wordmark / hero headlines only */
  --text-display-1:34px; --text-display-1-lh:38px;
  --text-display-2:28px; --text-display-2-lh:32px;

  /* UI scale, mirrors the app's React Native sizes */
  --text-title:24px;    --text-title-lh:30px;   /* screen titles: "Party Games" */
  --text-heading:20px;  --text-heading-lh:26px; /* card titles: "Picolo" */
  --text-body:16px;     --text-body-lh:22px;
  --text-small:14px;    --text-small-lh:20px;
  --text-label:12px;    --text-label-lh:16px;   /* section labels, uppercase + tracked */

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:800;
  --tracking-label:.14em;
  --tracking-tight:-.01em;
}

/* ---- spacing ---- */
:root{
  /* Spacing (theme.ts) — half/one/two/three/four/five/six */
  --space-half:2px; --space-one:4px; --space-two:8px; --space-three:16px;
  --space-four:24px; --space-five:32px; --space-six:64px;

  /* Layout constants */
  --max-content-width:800px;
  --tab-inset-ios:50px;
  --tab-inset-android:80px;
  --tab-screen-top-inset:var(--space-three);
  --screen-gutter:var(--space-three);
}

/* ---- effects ---- */
:root{
  /* Corner radii — pill for actions, soft-square for cards */
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:999px;

  /* Shadows: glows in brand colours rather than neutral drop shadows */
  --shadow-card:0 10px 24px rgba(4,7,16,.45);
  --glow-brand:0 8px 24px rgba(236,30,140,.35);
  --glow-role:0 8px 24px rgba(124,58,237,.35);
  --glow-jeton:0 0 18px rgba(255,211,78,.30);

  /* Hairline gradient outline used on hero + game tiles */
  --outline-brand:1px solid rgba(236,30,140,.55); /* @kind other */

  /* Motion */
  --ease-standard:cubic-bezier(.2,.8,.2,1); /* @kind other */
  --duration-fast:120ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:320ms; /* @kind other */
  --press-scale:.97; /* @kind other */
  --press-opacity:.85; /* @kind other */

  /* Blur / protection */
  --blur-tabbar:saturate(140%) blur(18px); /* @kind other */
  --protect-bottom:linear-gradient(180deg,rgba(10,18,36,0) 0%,rgba(10,18,36,.92) 70%); /* @kind color */
}