/* ============================================================
   Ocean & Sun — shared design tokens
   Source of truth for K-Toyz, K-Watch, and future apps.
   Distribution: copy this file into each app (no runtime fetch)
   and re-sync manually when tokens change.
   ============================================================ */

:root {
  /* Palette */
  --bg:    #0d2233;
  --dark:  #07121e;
  --s1:    #122d42;
  --s2:    #1a3f57;
  --s3:    #1f4d6e;
  --acc:   #e8c84a;
  --text:  #f5eecc;
  --t2:    #9ac5d5;
  --t3:    #5a8fa0;
  --green: #6dbf8a;
  --blue:  #5bb8d9;
  --red:   #e07070;
  --border: rgba(255, 255, 255, 0.07);

  /* Radius */
  --r-content:     8px;
  --r-sheet:       20px;
  --r-interactive: 999px;
  --r-circle:      50%;

  /* Spacing */
  --pad: 14px;

  /* Type scale — 8 sizes. --fs-base (14px) was merged into --fs-sm (13px)
     2026-07-22: only a 1.077 ratio apart (tightest gap in the whole scale
     by far — every other step is 1.14-1.25), and barely used. Apps still
     on the 9-size scale should map any --fs-base usage to --fs-sm. */
  --fs-2xs:  9px;   /* badges, micro labels          */
  --fs-xs:  11px;   /* secondary meta, footnotes     */
  --fs-sm:  13px;   /* body, nav, most UI — also covers what --fs-base used to */
  --fs-md:  16px;   /* card titles, sub-headings       */
  --fs-lg:  20px;   /* sheet headings                  */
  --fs-xl:  24px;   /* winner / hero display            */
  --fs-2xl: 30px;   /* large hero                       */
  --fs-3xl: 36px;   /* display                           */

  /* Fonts */
  --font-body: 'Barlow', system-ui, sans-serif;
  --font-display: 'Barlow Condensed', sans-serif;
}

/* ============================================================
   Breakpoints
   CSS custom properties cannot be used inside @media conditions —
   this is a documented literal value to reuse consistently across
   apps, not a live variable. One breakpoint, mobile-first (styles
   apply unqualified, this bump is additive on top):

   --bp-desktop: 680px — originated in K-Toyz's own CSS, now the
   shared convention. Below it: single column, --pad is 14px. At or
   above it: wider layouts (multi-column, row-direction footers/navs),
   --pad becomes 20px.
   ============================================================ */
@media (min-width: 680px) {
  :root { --pad: 20px; }
}