/* Mesa brand v1: colours, type and corners, shared by the landing page and the app.

   Decided by Jesper on 2026-10-21 (dev/plan/brand.md):
   - palette v1, read from Recraft board v3's swatches (step 2)
   - Baloo 2 for headlines and big numbers, Figtree for all other text (step 4)
   Only this file defines Mesa's colours and type; pages use the --mesa-* names,
   never the hex codes. index.html links it: the landing page (step 6, MES-315) is
   built on it, and the app takes it in fully in step 10.

   Contrast is WCAG 2 against the surface named; 4.5:1 is the bar for text, 3:1 for
   large text and controls. */

/* Fonts: self-hosted, so visitors' IP addresses are not sent to Google.
   Both are SIL Open Font License 1.1 (fonts/*-OFL.txt): free, also commercially.
   Latin + Latin Extended covers Swedish and the European languages. */
@font-face {
  font-family: "Baloo 2";
  src: url("fonts/baloo2-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  src: url("fonts/baloo2-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Palette v1 */
  --mesa-lagoon: #0DB69D;       /* signature: primary button, app icon, Mesa's own moments */
  --mesa-lagoon-deep: #088570;  /* links and teal text on white (4.6:1), pressed button */
  --mesa-ink: #152F2E;          /* the logo, text on light, text on Lagoon, the mat */
  --mesa-graphite: #494C48;     /* secondary text and lines on light; never on dark */
  --mesa-mist: #E7ECE9;         /* text on dark, light surfaces, the m in the icon */
  --mesa-sand: #E3C7B1;         /* warm accent on the landing page; never a marking in the game */
  --mesa-white: #FFFFFF;

  /* Roles: use these in pages, so a colour can change in one place */
  --mesa-bg-light: var(--mesa-white);          /* landing page */
  --mesa-surface-light: var(--mesa-mist);      /* bands and panels on the landing page */
  --mesa-bg-dark: var(--mesa-ink);             /* the app: Home and the mat */
  --mesa-text-on-light: var(--mesa-ink);       /* 15.0:1 on white, 11.9:1 on Mist */
  --mesa-text-muted-on-light: var(--mesa-graphite); /* 8.7:1 on white, 7.3:1 on Mist */
  --mesa-text-on-dark: var(--mesa-mist);       /* 11.9:1 on Ink */
  --mesa-text-muted-on-dark: #9DB3AE;          /* derived (Mist toward Ink), 6.4:1 on Ink */
  --mesa-primary: var(--mesa-lagoon);          /* Lagoon on Ink 5.5:1 */
  --mesa-primary-pressed: var(--mesa-lagoon-deep);
  --mesa-on-primary: var(--mesa-ink);          /* text on Lagoon 5.5:1; white would be 2.6:1 */
  --mesa-link-on-light: var(--mesa-lagoon-deep); /* on white only: on Mist it is 3.8:1 */

  /* Dark roles, the error colour, spacing and the shadow: the Mesa Design System's (step 5),
     added here with the landing page (step 6). Every text pair passes 4.5:1. */
  --mesa-surface-dark: #0E2120;          /* inset bands and panels on Ink */
  --mesa-surface-raised-dark: #1F3B3A;   /* fields, chips, round icon grounds */
  --mesa-control-border-dark: #6A8883;   /* field and outlined-button rings, 3:1 on Ink */
  --mesa-line-dark: #2A4644;             /* hairlines */
  --mesa-line-strong-dark: #35534F;      /* the app's stronger hairline: section rules, control rings */
  --mesa-primary-hover: #0BA58E;         /* primary hovered; on-primary text stays 4.6:1 */
  --mesa-link-on-dark: var(--mesa-lagoon);
  --mesa-link-hover-on-dark: #9FE3D6;    /* a link or text hovered on dark */
  --mesa-focus-on-dark: var(--mesa-lagoon);
  --mesa-focus-on-light: var(--mesa-lagoon-deep);
  --mesa-felt-dark: #1B3B39;             /* the game view's felt glow, behind the landing hero */
  --mesa-control-border-light: #7F8A86;
  --mesa-line-light: #DCE0DC;
  --mesa-danger-dark: #F2A58E;           /* error text and rings on dark */
  --mesa-danger-light: #A8432A;          /* error text and rings on light */
  --mesa-danger-soft-dark: #3A1F1F;
  --mesa-danger-soft-light: #F6E1DA;
  --mesa-shadow-raised-dark: 0 8px 24px rgba(0, 0, 0, 0.45);      /* dialogs, menus, panels that float */
  --mesa-shadow-raised-light: 0 8px 24px rgba(21, 47, 46, 0.14);

  /* Spacing: a 4 px scale */
  --mesa-space-1: 4px;   /* icon to label */
  --mesa-space-2: 8px;   /* label to field, between buttons */
  --mesa-space-3: 12px;  /* inside small controls, between list rows */
  --mesa-space-4: 16px;  /* inside fields and menus; the page gutter on phones */
  --mesa-space-6: 24px;  /* inside dialogs and panels */
  --mesa-space-8: 32px;  /* between sections of a panel */

  /* Type: Baloo 2 for headlines and big numbers (700-800, never caps, never long text),
     Figtree for everything else. */
  --mesa-font-display: "Baloo 2", ui-rounded, "Nunito", system-ui, sans-serif;
  --mesa-font-text: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Display scale (Baloo 2). Sizes / line height / weight */
  --mesa-display-xl: 800 clamp(2.5rem, 6vw, 3.5rem)/1.0 var(--mesa-font-display);   /* landing headline, 40-56 px */
  --mesa-display-l: 800 clamp(2rem, 4vw, 2.5rem)/1.05 var(--mesa-font-display);     /* section headline, 32-40 px */
  --mesa-title-m: 700 1.5rem/1.15 var(--mesa-font-display);                         /* screen title, 24 px */
  --mesa-title-s: 700 1.25rem/1.2 var(--mesa-font-display);                         /* dialog title, 20 px */
  --mesa-number: 800 1.375rem/1 var(--mesa-font-display);                           /* life total, 22 px */

  /* Text scale (Figtree) */
  --mesa-text-l: 400 1.125rem/1.5 var(--mesa-font-text);   /* landing intro, 18 px */
  --mesa-text-m: 400 1rem/1.5 var(--mesa-font-text);       /* body, 16 px */
  --mesa-text-s: 400 0.875rem/1.45 var(--mesa-font-text);  /* app text, 14 px */
  --mesa-text-xs: 500 0.75rem/1.4 var(--mesa-font-text);   /* captions, 12 px */
  --mesa-label: 600 0.8125rem/1.2 var(--mesa-font-text);   /* tags and labels, 13 px */
  --mesa-button: 700 0.9375rem/1 var(--mesa-font-text);    /* buttons, 15 px */

  /* Corners: round like the logo */
  --mesa-radius-s: 8px;      /* fields, small tags */
  --mesa-radius-m: 12px;     /* panels, dialogs */
  --mesa-radius-l: 20px;     /* cards, sheets */
  --mesa-radius-pill: 999px; /* buttons, chips */
  --mesa-radius-icon: 22.37%; /* the app icon's corners (as on the phone) */
}