/* Design tokens from the validated mockups; dark theme from the system or data-theme on <html>. */

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-400.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-700.woff2") format("woff2");
}

@font-face {
  font-family: "Bagel Fat One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bagel-fat-one-400.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Typography */
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-display: "Bagel Fat One", "Arial Rounded MT Bold", sans-serif;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 34px;
  --weight-regular: 400;
  --weight-bold: 700;
  --line-tight: 1.2;
  --line-body: 1.45;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Sizes */
  --control-height: 44px;
  --control-height-sm: 34px;
  --bottom-nav-height: 78px;

  /* Surfaces and text */
  --color-bg: #F4F5FA;
  --color-surface: #FFFFFF;
  --color-surface-muted: #EEF0F6;
  --color-text: #1A1F36;
  --color-text-muted: #4B5372;
  --color-border: #DDE1EC;
  --color-border-strong: #C9CEE0;

  /* Ink: the dark primary colour of buttons, inverted in the dark theme */
  --color-ink: #1A1F36;
  --color-ink-hover: #3A4270;
  --color-on-ink: #FFFFFF;

  --color-focus: #1F6FEB;
  --color-success: #16935A;
  --color-danger: #D22F45;
  --color-highlight: #FFC93C;

  --shadow-raised: 0 8px 24px rgb(26 31 54 / 0.16);
  --overlay: rgb(26 31 54 / 0.45);

  /* Default colours of the eight game themes (CAT-02); each group can recolour them */
  --theme-bluff: #D22F45;
  --theme-coop: #16935A;
  --theme-equipe: #1F6FEB;
  --theme-ambiance: #C98F00;
  --theme-strategie: #7A3FC0;
  --theme-enquete: #0E8F9C;
  --theme-reflexes: #EA6418;
  --theme-mots: #CF2F86;

  /* Share of the theme colour in tinted backgrounds */
  --theme-tint: 12%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0F1220;
    --color-surface: #1A1F36;
    --color-surface-muted: #232946;
    --color-text: #EEF0F6;
    --color-text-muted: #AEB4CC;
    --color-border: #2F3760;
    --color-border-strong: #4A5276;
    --color-ink: #EEF0F6;
    --color-ink-hover: #C9CEE0;
    --color-on-ink: #1A1F36;
    --color-focus: #6EA4FF;
    --shadow-raised: 0 8px 24px rgb(0 0 0 / 0.5);
    --overlay: rgb(0 0 0 / 0.6);
    --theme-tint: 22%;
  }
}

:root[data-theme="dark"],
.ludo-dark {
  color-scheme: dark;
  --color-bg: #0F1220;
  --color-surface: #1A1F36;
  --color-surface-muted: #232946;
  --color-text: #EEF0F6;
  --color-text-muted: #AEB4CC;
  --color-border: #2F3760;
  --color-border-strong: #4A5276;
  --color-ink: #EEF0F6;
  --color-ink-hover: #C9CEE0;
  --color-on-ink: #1A1F36;
  --color-focus: #6EA4FF;
  --shadow-raised: 0 8px 24px rgb(0 0 0 / 0.5);
  --overlay: rgb(0 0 0 / 0.6);
  --theme-tint: 22%;
}

.ludo-light {
  color-scheme: light;
  --color-bg: #F4F5FA;
  --color-surface: #FFFFFF;
  --color-surface-muted: #EEF0F6;
  --color-text: #1A1F36;
  --color-text-muted: #4B5372;
  --color-border: #DDE1EC;
  --color-border-strong: #C9CEE0;
  --color-ink: #1A1F36;
  --color-ink-hover: #3A4270;
  --color-on-ink: #FFFFFF;
  --color-focus: #1F6FEB;
  --shadow-raised: 0 8px 24px rgb(26 31 54 / 0.16);
  --overlay: rgb(26 31 54 / 0.45);
  --theme-tint: 12%;
}