/* Design tokens v3: a calm sky-blue and warm-paper palette in OKLCH for the light and dark themes (light-dark), type, space, shape, elevation and motion; an sRGB light fallback closes the file (change brand values here). */
:root {
  color-scheme: light dark;

  /* Brand colours, taken from the logo: sky blue is the Earth head, brick red the cape, ink the figure. Pairs are light then dark where a colour is used as text or an edge. */
  --c-sky: oklch(0.72 0.12 241);
  --c-sky-deep: oklch(0.42 0.127 250);
  --c-cape: light-dark(oklch(0.445 0.155 31), oklch(0.78 0.125 31));
  --c-ink: oklch(0.14 0.03 258);
  --c-white: oklch(1 0 0);
  /* Older names kept so no sheet changes: teal is now the sky blue, pink the cape, coral the attention colour */
  --c-teal: var(--c-sky);
  --c-teal-deep: var(--c-sky-deep);
  --c-pink: var(--c-cape);
  --c-coral: var(--c-cape);
  --on-coral: light-dark(oklch(1 0 0), oklch(0.17 0.03 258));
  /* Supporting colours for dashboards, notes and bubbles, all at the same calm strength; each is one value because sheets set white or ink text on it */
  --c-blue: oklch(0.465 0.14 268);
  --c-navy: oklch(0.35 0.05 258);
  --c-sand: oklch(0.83 0.065 85);
  --c-green: oklch(0.445 0.115 150);
  --c-purple: oklch(0.47 0.13 300);
  --c-yellow: oklch(0.83 0.12 90);
  --c-orange: oklch(0.735 0.14 62);
  --c-red: oklch(0.445 0.155 31);
  /* Roles: a volunteer is sky blue, a nonprofit brick red, a business dusk blue; text on each colour */
  --role-volunteer: var(--c-sky);
  --role-nonprofit: var(--c-cape);
  --role-business: light-dark(var(--c-blue), oklch(0.78 0.105 268));
  --on-role-volunteer: oklch(0.17 0.03 258);
  --on-role-nonprofit: light-dark(oklch(1 0 0), oklch(0.17 0.03 258));
  --on-role-business: light-dark(oklch(1 0 0), oklch(0.17 0.03 258));

  /* Hero photograph: it keeps its own colour and a deep blue wash is multiplied over it, dark enough that white text reads at 7:1 on the white clouds. Dark end (behind the photo while it loads), then the stops of the wash from the text outward */
  --duo-dark: oklch(0.26 0.1 262);
  --duo-core: oklch(0.4 0.17 262);
  --duo-mid: oklch(0.43 0.15 260);
  --duo-edge: oklch(0.66 0.14 250);

  /* Sponsorship plans: band, ink on the band (4.5:1) and mark for stars on the page (3:1), per theme */
  --plan-slate: light-dark(oklch(0.447 0.034 261.3), oklch(0.746 0.028 262.3));
  --plan-slate-ink: light-dark(oklch(1 0 0), oklch(0.191 0 0));
  --plan-slate-mark: light-dark(oklch(0.447 0.034 261.3), oklch(0.746 0.028 262.3));
  --plan-blue: light-dark(oklch(0.512 0.159 260.2), oklch(0.715 0.123 262.9));
  --plan-blue-ink: light-dark(oklch(1 0 0), oklch(0.191 0 0));
  --plan-blue-mark: light-dark(oklch(0.512 0.159 260.2), oklch(0.715 0.123 262.9));
  --plan-green: light-dark(oklch(0.523 0.135 144.2), oklch(0.735 0.14 145));
  --plan-green-ink: light-dark(oklch(1 0 0), oklch(0.191 0 0));
  --plan-green-mark: light-dark(oklch(0.523 0.135 144.2), oklch(0.735 0.14 145));
  --plan-orange: light-dark(oklch(0.735 0.161 58.8), oklch(0.735 0.161 58.8));
  --plan-orange-ink: light-dark(oklch(0.191 0 0), oklch(0.191 0 0));
  --plan-orange-mark: light-dark(oklch(0.555 0.146 49), oklch(0.735 0.161 58.8));

  /* Theme: warm paper and deep ink in the light theme, deep navy in the dark; each pair is light then dark. Every text colour reaches 7:1 (AAA) on every surface it sits on: body text 16:1 or better, muted text 9:1 or better, links and accent text 7.4:1 or better. */
  --bg: light-dark(oklch(0.985 0.005 90), oklch(0.17 0.025 258));
  --surface: light-dark(oklch(1 0 0), oklch(0.225 0.028 258));
  --surface-2: light-dark(oklch(0.955 0.008 90), oklch(0.275 0.03 258));
  --text: light-dark(oklch(0.22 0.03 258), oklch(0.965 0.006 90));
  --text-muted: light-dark(oklch(0.37 0.03 258), oklch(0.88 0.015 258));
  --border: light-dark(oklch(0.9 0.01 90), oklch(0.34 0.03 258));
  --border-strong: light-dark(oklch(0.58 0.025 258), oklch(0.6 0.03 258));
  --focus: light-dark(var(--c-sky-deep), oklch(0.86 0.074 241));
  --accent: var(--c-sky);
  --accent-text: light-dark(var(--c-sky-deep), oklch(0.86 0.074 241));
  --on-accent: oklch(0.17 0.03 258);
  --link: light-dark(oklch(0.42 0.134 252), oklch(0.86 0.074 241));
  --glass: var(--bg);
  --shadow-1: 0 1px 2px light-dark(oklch(0.25 0.03 258 / 0.1), oklch(0 0 0 / 0.4));
  --shadow-2: 0 6px 16px -6px light-dark(oklch(0.25 0.03 258 / 0.2), oklch(0 0 0 / 0.55));
  --shadow: var(--shadow-1);

  /* Type: Inter for Latin and Cyrillic, Noto Sans for Hebrew, Arabic and Devanagari (self-hosted, static/css/fonts.css); Chinese uses the system font */
  --font-sans: "Inter", "Inter Fallback", "Noto Sans Hebrew", "Noto Sans Arabic", "Noto Sans Devanagari",
    system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; /* language names: each in its own script, no web font to fetch */
  --fs-00: 0.8125rem; /* the smallest size, for labels in a narrow column; never below 13px */
  --fs-0: 0.875rem;
  --fs-1: 1rem;
  --fs-2: 1.25rem;
  --fs-3: clamp(1.25rem, 3.2vw, 1.6rem);
  --fs-4: clamp(1.75rem, 4.5vw, 2.4rem);
  --fs-hero: clamp(2.25rem, 8vw, 4.5rem);
  --fs-figure: clamp(3.25rem, 9vw, 4.75rem); /* a very large number, such as total verified hours */
  --lh: 1.55;
  --fw-strong: 650;

  /* Space, shape, layout, motion */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --topbar-h: 60px;
  --bottombar-h: 64px;
  --max-w: 72rem;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 220ms;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* sRGB fallback for browsers without oklch() and light-dark(): the light theme in hex (checked against the values above by apps/core/tests/test_tokens.py) */
@supports not (color: light-dark(oklch(0 0 0), oklch(1 0 0))) {
  :root {
    --c-sky: #57aee8;
    --c-sky-deep: #004e8f;
    --c-cape: #972213;
    --c-ink: #030915;
    --c-white: #ffffff;
    --c-teal: #57aee8;
    --c-teal-deep: #004e8f;
    --c-pink: #972213;
    --c-coral: #972213;
    --on-coral: #ffffff;
    --c-blue: #3852a7;
    --c-navy: #2a3b55;
    --c-sand: #dbc597;
    --c-green: #10652f;
    --c-purple: #674698;
    --c-yellow: #e6c465;
    --c-orange: #e79340;
    --c-red: #972213;
    --role-volunteer: #57aee8;
    --role-nonprofit: #972213;
    --role-business: #3852a7;
    --on-role-volunteer: #07101c;
    --on-role-nonprofit: #ffffff;
    --on-role-business: #ffffff;
    --duo-dark: #061f53;
    --duo-core: #093da1;
    --duo-mid: #154aa0;
    --duo-edge: #4697e4;
    --plan-slate: #4a5568;
    --plan-slate-ink: #ffffff;
    --plan-slate-mark: #4a5568;
    --plan-blue: #2a62c0;
    --plan-blue-ink: #ffffff;
    --plan-blue-mark: #2a62c0;
    --plan-green: #2e7d32;
    --plan-green-ink: #ffffff;
    --plan-green-mark: #2e7d32;
    --plan-orange: #f28c29;
    --plan-orange-ink: #141414;
    --plan-orange-mark: #b45307;
    --bg: #fbfaf6;
    --surface: #ffffff;
    --surface-2: #f2f0ea;
    --text: #121b28;
    --text-muted: #364050;
    --border: #e0ded7;
    --border-strong: #717b89;
    --focus: #004e8f;
    --accent: #57aee8;
    --accent-text: #004e8f;
    --on-accent: #07101c;
    --link: #004d93;
    --glass: #fbfaf6;
    --shadow-1: 0 1px 2px rgb(26 33 51 / 0.1);
    --shadow-2: 0 6px 16px -6px rgb(26 33 51 / 0.2);
  }
}