/*
========================================================
Theme definition — Sage & Stone design system.

## Principles

The main reason to use this style of CSS, is to limit
the number of options for each values. There are just
a few colors, a few sizes, fonts, etc.

However there are some css attributes that don't have
a large number of values, and for those, it may not
be necessary to create variables, or even short class
names.

For example, "display" only has a few possible values,
it would be just as well to use this in a style HTML
attribute.

Q: how about media queries? is it worth having those
    classes which eliminates having to write media
    queries?
For example, display:none on mobile, display:block on
non-small devices?
Or is this a component called "block-non-mobile"?

## Components

For things that we repeat a lot, like a card, or link
styling, we can create components. Either via CSS,
or via our js/html framework.

If via CSS, we will need to use the variables in
attributes, for values, or maybe use a CSS compiler
like SCSS, LESS, etc.
*/

/* This is for light theme, and mobile/default sizing */
/* Dark theme and other sizes are overriden below */
:root {
    /* Inspired by material 3 color roles */

    /* -----------------------------------------------
       Light color theme — Sage & Stone
       source: DESIGN.md
    */
    --light-color-primary: #386948;
    --light-color-on-primary: #e8ffe9;
    --light-color-primary-container: #b9efc5;
    --light-color-on-primary-container: #2a5b3b;
    
    --light-color-secondary: #665e53;
    --light-color-on-secondary: #fff8f2;
    --light-color-secondary-container: #ece1d3;
    --light-color-on-secondary-container: #585146;

    --light-color-tertiary: #745c27;
    --light-color-on-tertiary: #fff8f1;
    --light-color-tertiary-container: #fad998;
    --light-color-on-tertiary-container: #614b18;

    --light-color-error: #a83836;
    --light-color-on-error: #fff7f6;
    --light-color-error-container: #fa746f;
    --light-color-on-error-container: #6e0a12;

    --light-color-surface: #f7faf4;
    --light-color-on-surface: #2c342e;

    --light-color-surface-variant: #dce5db;
    --light-color-on-surface-variant: #59615a;

    --light-color-outline: #747d75;
    --light-color-outline-variant: #abb4ac;
    --light-color-shadow: #000000;
    --light-color-scrim: #000000;

    --light-color-inverse-surface: #0b0f0c;
    --light-color-inverse-on-surface: #9a9e99;

    --light-color-inverse-primary: #bef5ca;

    --light-color-primary-fixed: #b9efc5;
    --light-color-on-primary-fixed: #15482a;

    --light-color-primary-fixed-dim: #abe1b7;
    --light-color-on-primary-fixed-variant: #346544;

    --light-color-secondary-fixed: #ece1d3;
    --light-color-on-secondary-fixed: #453e34;

    --light-color-secondary-fixed-dim: #ded3c5;
    --light-color-on-secondary-fixed-variant: #625a50;

    --light-color-tertiary-fixed: #fad998;
    --light-color-on-tertiary-fixed: #4d3806;

    --light-color-tertiary-fixed-dim: #ebcb8b;
    --light-color-on-tertiary-fixed-variant: #6c5421;

    --light-color-surface-dim: #d3dcd3;
    --light-color-surface-bright: #f7faf4;
    --light-color-surface-container-lowest: #ffffff;
    --light-color-surface-container-low: #f0f5ee;
    --light-color-surface-container: #e9f0e8;
    --light-color-surface-container-high: #e3eae2;
    --light-color-surface-container-highest: #dce5db;

    /* -----------------------------------------------
       Dark color theme — Sage & Stone Dark
       source: DESIGN.md
    */
    --dark-color-primary: #bbcabc;
    --dark-color-on-primary: #27332a;
    --dark-color-primary-container: #2d3a30;
    --dark-color-on-primary-container: #95a497;
    --dark-color-secondary: #bdcab7;
    --dark-color-on-secondary: #283326;
    --dark-color-secondary-container: #3e4a3b;
    --dark-color-on-secondary-container: #acb9a6;
    --dark-color-tertiary: #cec6b5;
    --dark-color-on-tertiary: #353024;
    --dark-color-tertiary-container: #3c372b;
    --dark-color-on-tertiary-container: #a7a090;
    --dark-color-error: #ffb4ab;
    --dark-color-on-error: #690005;
    --dark-color-error-container: #93000a;
    --dark-color-on-error-container: #ffdad6;
    --dark-color-surface: #121412;
    --dark-color-on-surface: #e2e3df;
    --dark-color-surface-variant: #333533;
    --dark-color-on-surface-variant: #c3c8c1;
    --dark-color-outline: #8d928c;
    --dark-color-outline-variant: #434843;
    --dark-color-shadow: #000000;
    --dark-color-scrim: #000000;
    --dark-color-inverse-surface: #e2e3df;
    --dark-color-inverse-on-surface: #2f312e;
    --dark-color-inverse-primary: #546256;
    --dark-color-primary-fixed: #d7e6d8;
    --dark-color-on-primary-fixed: #121e15;
    --dark-color-primary-fixed-dim: #bbcabc;
    --dark-color-on-primary-fixed-variant: #3d4a3f;
    --dark-color-secondary-fixed: #d9e6d2;
    --dark-color-on-secondary-fixed: #141e12;
    --dark-color-secondary-fixed-dim: #bdcab7;
    --dark-color-on-secondary-fixed-variant: #3e4a3b;
    --dark-color-tertiary-fixed: #ebe1d0;
    --dark-color-on-tertiary-fixed: #1f1b11;
    --dark-color-tertiary-fixed-dim: #cec6b5;
    --dark-color-on-tertiary-fixed-variant: #4c463a;
    --dark-color-surface-dim: #121412;
    --dark-color-surface-bright: #383a37;
    --dark-color-surface-container-lowest: #0d0f0d;
    --dark-color-surface-container-low: #1a1c1a;
    --dark-color-surface-container: #1e201e;
    --dark-color-surface-container-high: #292a28;
    --dark-color-surface-container-highest: #333533;

    /* Font sizes, used on mobile */
    --font-size-xxl-smallscreen: 1.75rem;
    --font-size-xl-smallscreen: 1.375rem;
    --font-size-l-smallscreen: 1.125rem;
    --font-size-m-smallscreen: 0.9375rem;
    --font-size-s-smallscreen: 0.8125rem;
    --font-size-xs-smallscreen: 0.6875rem;
    --font-size-xxs-smallscreen: 0.5625rem;
    /* Font sizes used on bigger devices */
    --font-size-xxl-bigscreen: 2.0625rem;    /* ~33px — headline-lg */
    --font-size-xl-bigscreen: 1.5rem;        /* 24px  — headline-md */
    --font-size-l-bigscreen: 1.125rem;       /* 18px  — body-lg */
    --font-size-m-bigscreen: 1rem;           /* 16px  — body-md */
    --font-size-s-bigscreen: 0.875rem;       /* 14px  */
    --font-size-xs-bigscreen: 0.8125rem;     /* 13px  */
    --font-size-xxs-bigscreen: 0.75rem;      /* 12px  — label-md */

    /* Fonts — Nunito Sans for body/UI, Literata for editorial headlines */
    --font-1: "Nunito Sans", "helvetica neue", helvetica, sans-serif;
    --font-2: "Literata", Georgia, serif;
    --font-3: monospace;
    --font-4: "Inter", "helvetica neue", helvetica, sans-serif;

    /* Spacing */
    --spacing-xxxl-smallscreen: 20rem;
    --spacing-xxl-smallscreen: 16rem;
    --spacing-xl-smallscreen: 8rem;
    --spacing-l-smallscreen: 4rem;
    --spacing-m-smallscreen: 2rem;
    --spacing-s-smallscreen: 1rem;
    --spacing-xs-smallscreen: 0.5rem;
    --spacing-xxs-smallscreen: 0.25rem;
    --spacing-xxxs-smallscreen: 0.2rem;
    --spacing-none-smallscreen: 0;

    --spacing-xxxl-bigscreen: 32rem;
    --spacing-xxl-bigscreen: 18rem;
    --spacing-xl-bigscreen: 10rem;
    --spacing-l-bigscreen: 5rem;
    --spacing-m-bigscreen: 2.5rem;
    --spacing-s-bigscreen: 1.5rem;
    --spacing-xs-bigscreen: 0.875rem;
    --spacing-xxs-bigscreen: 0.5rem;
    --spacing-xxxs-bigscreen: 0.25rem;
    --spacing-none-bigscreen: 0;


    /* Min/Max width */
    --width-xxxl: 96rem;
    --width-xxl: 64rem;
    --width-xl: 48rem;
    --width-l: 32rem;
    --width-m: 16rem;
    --width-s: 8rem;
    --width-xs: 4rem;
    --width-xxs: 2rem;
    --width-xxxs: 1rem;

    /* todo: split into transition speed, transition mode, etc */
    --transition-color-fast: color 0.15s ease-in;
    --transition-color-slow: color 0.5s ease-in;
    --transition-all-fast: all 0.15s ease-in;
    --transition-all-slow: all 0.5s ease-in;

    --font-weight-xxxl: 900;
    --font-weight-xxl: 800;
    --font-weight-xl: 700;
    --font-weight-l: 600;
    --font-weight-m: 500;
    --font-weight-s: 400;
    --font-weight-xs: 300;
    --font-weight-xxs: 200;
    --font-weight-xxxs: 100;

    --border-width-xxl: 5px;
    --border-width-xl: 4px;
    --border-width-l: 3px;
    --border-width-m: 2px;
    --border-width-s: 1px;
    --border-width-xs: 1px;
    --border-width-xxs: 1px;

    /* Border radius — matches DESIGN.md rounded scale */
    --border-radius-xxl: 24px;  /* pill accents */
    --border-radius-xl: 16px;   /* large cards/containers */
    --border-radius-l: 12px;
    --border-radius-m: 8px;     /* standard elements */
    --border-radius-s: 4px;
    --border-radius-xs: 2px;
    --border-radius-xxs: 1px;

    /* Letter spacing — for uppercase labels */
    --letter-spacing-s: 0.05em;
    --letter-spacing-m: 0.06em;
    --letter-spacing-l: 0.08em;

    /* Opacity levels */
    --opacity-decorative: 0.07;
    --opacity-muted: 0.6;
    --opacity-dim: 0.7;
    --opacity-subtle: 0.8;

    /* Line height */
    --line-height-s: 1;
    --line-height-m: 1.25;
    --line-height-l: 1.5;

    /* Sport colors */
    --color-sport-swim:     #3b82f6;
    --color-sport-bike:     #f97316;
    --color-sport-run:      #22c55e;
    --color-sport-strength: #a855f7;

    /* Metric colors — one per measured stream (HR, power, …), so a metric
       reads as the same color everywhere it appears: chart lines, stat tiles,
       zone tables, lap rows.

       Deliberately NOT light/dark role pairs. The theme
       roles are generated at OKLCH tone 40 in light and tone 80 in dark, and
       tone 80 is a pastel by construction — that is what washed the activity
       charts out in dark mode, and it also collapsed speed/cadence/elevation
       into three near-identical greys. A metric's identity shouldn't change
       with the theme, so each is a single value chosen to work on both
       surfaces.

       Validated (dataviz six checks, adjacent + all pairs) against the light
       surface #f7faf4 and the dark surface #121412:
         OKLCH L 0.48–0.67 · C >= 0.10 · contrast >= 3:1 on both surfaces
         worst CVD pair 9.4 (protan/deutan, target 8) · worst normal 16.6.
       Re-run scripts/validate_palette.js before changing any of these — blue
       and purple in particular collapse to ~1 ΔE under deuteranopia, so
       speed is cyan rather than the obvious blue. */
    --color-metric-hr:      #e11d48;
    --color-metric-power:   #a855f7;
    --color-metric-speed:   #0891b2;
    --color-metric-cadence: #d97706;
    /* Elevation is context, not a series: it stays on the theme's neutral so
       it recedes behind whatever metric is drawn over it. */
    --color-metric-elevation: var(--color-on-surface-variant);

    /* Danger — destructive action color */
    --color-danger:       #ef4444;
    --color-danger-hover: #dc2626;
    --color-danger-on:    white;

    /* Athlete flag type colors */
    --color-flag-fatigue:    #f97316;
    --color-flag-injury:     #ef4444;
    --color-flag-illness:    #a855f7;
    --color-flag-life-stress:#3b82f6;
    --color-flag-motivation: #eab308;
    --color-flag-question:   #14b8a6;
}