/* Koinei design tokens — Apple-style, single source of truth.
   Mirrored in tokens.json (for iOS/Android codegen). */

/* Windows ships no flag-emoji glyphs (🇺🇸 renders as "us"). This font holds
   ONLY the flag codepoints — the unicode-range below guarantees it can never
   touch any other character (and it is NOT part of the reader's font stack,
   which must stay exactly as the symbols technique requires). */
@font-face {
  font-family: "Country Flags";
  src: url("/assets/fonts/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
  font-display: swap;
}

:root {
  /* Type — system stack lands on SF on Apple devices, Roboto/Segoe elsewhere.
     "Country Flags" first: it only claims flag codepoints (see above). */
  --font-ui: "Country Flags", -apple-system, BlinkMacSystemFont, "SF Pro Text",
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Country Flags", -apple-system, BlinkMacSystemFont,
                  "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue",
                  Arial, sans-serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 17px;     /* Apple body */
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 38px;

  /* Color — light gray/white with a light-blue accent */
  --bg: #f5f5f7;            /* Apple page gray */
  --bg-elevated: #ffffff;
  --bg-grouped: #fbfbfd;
  --ink: #1d1d1f;           /* near-black */
  --ink-secondary: #6e6e73; /* secondary label */
  --ink-tertiary: #aeaeb2;
  --hairline: rgba(60, 60, 67, 0.12);
  --accent: #0a84ff;        /* iOS light blue */
  --accent-soft: rgba(10, 132, 255, 0.12);
  --danger: #ff3b30;
  --success: #34c759;
  --warning: #ff9f0a;

  /* Frosted glass */
  --glass: rgba(255, 255, 255, 0.72);
  --glass-dark: rgba(28, 28, 30, 0.68);
  --glass-blur: saturate(180%) blur(20px);

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

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* Elevation */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-float: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.18);

  /* Motion — Apple-ish springs approximated with cubic-bezier */
  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 160ms;
  --dur-med: 280ms;
  --dur-slow: 420ms;

  /* Layout */
  --tabbar-height: 56px;   /* comfortable tap target for the bottom nav */
  --content-max: 1100px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-elevated: #1c1c1e;
    --bg-grouped: #111113;
    --ink: #f5f5f7;
    --ink-secondary: #98989d;
    --ink-tertiary: #636366;
    --hairline: rgba(84, 84, 88, 0.48);
    --glass: rgba(28, 28, 30, 0.72);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.5);
  }
}