/* 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 fallback for browsers without light-dark() and the always-dark regions close 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), var(--dark-cape));
  --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), var(--dark-on));
  /* 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);
  /* Tracks (TR1): a volunteer is sky blue, a nonprofit brick red, a business dusk blue. Each has its fill, the ink on the fill and the colour for text and bars on the page (7:1 on every surface). A page takes one track through data-track (rules at the end of this file); visitors and members are volunteers, so these are the defaults. */
  --track-volunteer: var(--c-sky);
  --track-nonprofit: var(--c-cape);
  --track-business: light-dark(var(--c-blue), var(--dark-business));
  --on-track-volunteer: oklch(0.17 0.03 258);
  --on-track-nonprofit: light-dark(oklch(1 0 0), var(--dark-on));
  --on-track-business: light-dark(oklch(1 0 0), var(--dark-on));
  --track-volunteer-text: light-dark(var(--c-sky-deep), var(--dark-link));
  --track-nonprofit-text: var(--c-cape);
  --track-business-text: light-dark(oklch(0.43 0.14 268), var(--dark-business));

  /* 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));

  /* The dark theme's colours as plain values: the dark theme below takes them, and so do the regions that are dark in both themes (end of this file), which must not need light-dark() to find them. */
  --dark-bg: oklch(0.17 0.025 258);
  --dark-surface: oklch(0.225 0.028 258);
  --dark-surface-2: oklch(0.275 0.03 258);
  --dark-text: oklch(0.965 0.006 90);
  --dark-text-muted: oklch(0.88 0.015 258);
  --dark-border: oklch(0.34 0.03 258);
  --dark-border-strong: oklch(0.6 0.03 258);
  --dark-link: oklch(0.86 0.074 241); /* links, accent text and the focus ring */
  --dark-cape: oklch(0.78 0.125 31);
  --dark-business: oklch(0.78 0.105 268);
  --dark-on: oklch(0.17 0.03 258); /* ink on the brighter fills of the dark theme */

  /* 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), var(--dark-bg));
  --surface: light-dark(oklch(1 0 0), var(--dark-surface));
  --surface-2: light-dark(oklch(0.955 0.008 90), var(--dark-surface-2));
  --text: light-dark(oklch(0.22 0.03 258), var(--dark-text));
  --text-muted: light-dark(oklch(0.37 0.03 258), var(--dark-text-muted));
  --border: light-dark(oklch(0.9 0.01 90), var(--dark-border));
  --border-strong: light-dark(oklch(0.58 0.025 258), var(--dark-border-strong));
  --focus: light-dark(var(--c-sky-deep), var(--dark-link));
  --accent: var(--track-volunteer);
  --accent-text: var(--track-volunteer-text);
  --on-accent: var(--on-track-volunteer);
  --link: light-dark(oklch(0.42 0.134 252), var(--dark-link));
  --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;
    --track-volunteer: #57aee8;
    --track-nonprofit: #972213;
    --track-business: #3852a7;
    --on-track-volunteer: #07101c;
    --on-track-nonprofit: #ffffff;
    --on-track-business: #ffffff;
    --track-volunteer-text: #004e8f;
    --track-nonprofit-text: #972213;
    --track-business-text: #2f479b;
    --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;
    --dark-bg: #09101a;
    --dark-surface: #141c29;
    --dark-surface-2: #1e2836;
    --dark-text: #f5f3ef;
    --dark-text-muted: #d1d8e2;
    --dark-border: #2e3948;
    --dark-border-strong: #758193;
    --dark-link: #a6d8fe;
    --dark-cape: #fd9886;
    --dark-business: #9ab5fb;
    --dark-on: #07101c;
    --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);
  }

    /* A browser without light-dark() that is set to dark gets the dark theme from the plain values above (a page that picks its theme with data-theme stays light here) */
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        --bg: var(--dark-bg);
        --glass: var(--dark-bg);
        --surface: var(--dark-surface);
        --surface-2: var(--dark-surface-2);
        --text: var(--dark-text);
        --text-muted: var(--dark-text-muted);
        --border: var(--dark-border);
        --border-strong: var(--dark-border-strong);
        --focus: var(--dark-link);
        --accent-text: var(--dark-link);
        --link: var(--dark-link);
        --c-cape: var(--dark-cape);
        --c-pink: var(--dark-cape);
        --c-coral: var(--dark-cape);
        --track-nonprofit: var(--dark-cape);
        --track-business: var(--dark-business);
        --track-volunteer-text: var(--dark-link);
        --track-nonprofit-text: var(--dark-cape);
        --track-business-text: var(--dark-business);
        --on-coral: var(--dark-on);
        --on-track-nonprofit: var(--dark-on);
        --on-track-business: var(--dark-on);
        --plan-slate: #a3adbf;
        --plan-slate-ink: #141414;
        --plan-slate-mark: #a3adbf;
        --plan-blue: #7aa2f0;
        --plan-blue-ink: #141414;
        --plan-blue-mark: #7aa2f0;
        --plan-green: #6cc070;
        --plan-green-ink: #141414;
        --plan-green-mark: #6cc070;
        --plan-orange-mark: #f28c29;
      }
    }
}

/* Regions that are dark in both themes (the page head, the closing band, the hero) sit on ink or deep blue, so they read the dark theme's colours as plain values. Through light-dark() alone a browser that cannot evaluate it (Safari and Chrome before 2024, many older phones) hands them the light theme's dark ink: dark text on a dark background. Add a new dark region to this list, never a bare color-scheme: dark (a test checks). */
.page-head,
.band,
.hero {
  color-scheme: dark;
  --bg: var(--dark-bg);
  --glass: var(--dark-bg);
  --surface: var(--dark-surface);
  --surface-2: var(--dark-surface-2);
  --text: var(--dark-text);
  --text-muted: var(--dark-text-muted);
  --border: var(--dark-border);
  --border-strong: var(--dark-border-strong);
  --focus: var(--dark-link);
  --accent-text: var(--dark-link);
  --link: var(--dark-link);
  --c-cape: var(--dark-cape);
  --c-pink: var(--dark-cape);
  --c-coral: var(--dark-cape);
  --track-nonprofit: var(--dark-cape);
  --track-business: var(--dark-business);
  --track-volunteer-text: var(--dark-link);
  --track-nonprofit-text: var(--dark-cape);
  --track-business-text: var(--dark-business);
  --on-coral: var(--dark-on);
  --on-track-nonprofit: var(--dark-on);
  --on-track-business: var(--dark-on);
}

/* One track per page (TR1): data-track picks the fill, ink and text colour that buttons, active tabs, chips and bars (--accent*) and page heads, bands and cards (--tone) already read; a volunteer page keeps the defaults above. The dark regions read the tokens again inside themselves, so a browser without light-dark() gets their plain dark values: name a new dark region in the rule above and in both rules below. The filled button's hover moves away from its ink: toward white on a volunteer, toward the page text on the other two. */
[data-track="nonprofit"],
[data-track="nonprofit"] :is(.page-head, .band, .hero) {
  --accent: var(--track-nonprofit);
  --on-accent: var(--on-track-nonprofit);
  --accent-text: var(--track-nonprofit-text);
  --tone: var(--track-nonprofit);
  --on-tone: var(--on-track-nonprofit);
  --hover-tint: var(--text);
}

[data-track="business"],
[data-track="business"] :is(.page-head, .band, .hero) {
  --accent: var(--track-business);
  --on-accent: var(--on-track-business);
  --accent-text: var(--track-business-text);
  --tone: var(--track-business);
  --on-tone: var(--on-track-business);
  --hover-tint: var(--text);
}