/* Aevo design tokens, v2 "Daylight" (2 Nov 2026).
   Idea: the day is a sun path. Calories left is how high the sun still is, levels are times of day
   (Dawn, Noon, Dusk), and the one dark hero panel on Today carries the drama while everything
   around it stays quiet. Electric violet is the action colour, sun gold is progress, flame is the streak.
   Fonts (Google Fonts): Bricolage Grotesque 600..800 for numbers and headings (Anek Bangla for Bangla headings); Plus Jakarta Sans 400..800 for text;
   Hind Siliguri, Hind and Noto Sans Arabic follow in the stack for other scripts. */

:root {
  /* COLOUR. Named by purpose. Light theme is the base; dark only overrides values below.
     Checked by script: text 4.5:1 or better, input edges and chart colours 3:1 or better. */
  --color-background: #f5f6ff;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #ebecfb;
  --color-border: #dcdef5;
  --color-border-strong: #6c72ab;
  --color-text-primary: #14123d;
  --color-text-secondary: #3f4178;
  --color-text-muted: #5a5d8e;

  --color-action: #16a34a;              /* buttons, links, the active tab */
  --color-action-hover: #15803d;
  --color-action-pressed: #116932;
  --color-action-soft: #dcfce7;
  --color-action-text: #15803d;         /* action-coloured text on soft fills */
  --color-text-on-action: #ffffff;

  --color-accent: #ffb800;              /* the sun: progress, highlights. Never a button. */
  --color-accent-soft: #fff1c7;
  --color-accent-text: #6b4400;
  --color-text-on-accent: #2a1d00;

  --color-sun-start: #4ade80;           /* the three stops of the sun arc, for SVG strokes */
  --color-sun-mid: #ff9a1f;
  --color-sun-end: #ff4f7b;

  --color-flame: #ff5a36;               /* streak only */
  --color-flame-soft: #ffe4dc;
  --color-flame-text: #a8310f;

  --color-focus: #16a34a;

  /* Feedback. "Over" is clay, not red: going over target is information, not an error. */
  --color-success: #0d7a54;  --color-success-soft: #dcf6ec;
  --color-warning: #8a5300;  --color-warning-soft: #fff0d1;
  --color-error: #c42b3a;    --color-error-soft: #fde3e6;
  --color-info: #2160c4;     --color-info-soft: #e1ecfd;
  --color-over: #a8501f;     --color-over-soft: #fbe7da;

  /* Data colours. Always with a letter or label, never colour alone. */
  --color-macro-protein: #2f6fe0;
  --color-macro-carbs: #b86f00;
  --color-macro-fat: #d63c76;
  --color-chart-grid: #dcdef5;
  --color-overlay: rgb(20 18 61 / 0.55);

  /* The hero panel on Today is dark in both themes, so white text always has room. */
  --hero-bg: linear-gradient(165deg, #113a24 0%, #0a1f15 55%, #050507 100%);
  --hero-text: #ffffff;
  --hero-text-muted: #cfcbff;
  --hero-track: rgb(255 255 255 / 0.22);

  /* Gradients. Used for fills and level cards, never behind small body text without a dark or light ink token. */
  --gradient-sun: linear-gradient(90deg, #4ade80 0%, #22c55e 50%, #15803d 100%);
  --gradient-action: linear-gradient(135deg, #4ade80 0%, #15803d 100%);
  --level-dawn-bg: linear-gradient(150deg, #ffe9a8 0%, #ffb36b 100%);
  --level-dawn-ink: #3a1d00;
  --level-noon-bg: linear-gradient(150deg, #c4e6ff 0%, #93a9ff 100%);
  --level-noon-ink: #0d1a4a;
  --level-dusk-bg: linear-gradient(150deg, #8a4bff 0%, #2a1fb5 100%);
  --level-dusk-ink: #ffffff;

  /* TYPOGRAPHY. Bricolage Grotesque is characterful and heavy, so it is only for numbers, titles and level names.
     Everything readable is Plus Jakarta Sans. Body never under 16px. Other scripts have taller line height. */
  --font-display: "Bricolage Grotesque", "Anek Bangla", "Plus Jakarta Sans", "Hind Siliguri", "Hind", "Noto Sans Arabic", system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", "Hind Siliguri", "Hind", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-numeric-features: "tnum" 1, "lnum" 1;

  --text-xs: 0.8125rem;    /* 13px captions, the word "estimate" */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px body */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.375rem;     /* 22px screen titles */
  --text-2xl: 1.75rem;     /* 28px */
  --text-3xl: 2.25rem;     /* 36px key figures */
  --text-display: 2.75rem; /* 44px: the calories-left number, sized to fit inside the gauge */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  --leading-tight: 1.1;
  --leading-normal: 1.45;
  --leading-relaxed: 1.65;
  --leading-script: 1.75;

  /* SPACING. 4px base, eight steps. */
  --space-hair: 0.25rem;
  --space-snug: 0.5rem;
  --space-cosy: 0.75rem;
  --space-comfortable: 1rem;
  --space-roomy: 1.5rem;
  --space-spacious: 2rem;
  --space-airy: 3rem;
  --space-vast: 4rem;

  --size-tap: 2.75rem;
  --size-control: 3.5rem;        /* 56px: chunky controls */
  --size-tabbar: 4.5rem;
  --size-gauge: 20rem;           /* sun gauge width */
  --size-content-max: 75rem;
  --size-reading-max: 40rem;

  /* RADIUS. Large and soft; the gauge, chips and Add button are fully round. */
  --radius-sm: 0.875rem;   /* 14 */
  --radius-md: 1.375rem;   /* 22 */
  --radius-lg: 2rem;       /* 32 */
  --radius-full: 999px;

  /* ELEVATION. Plain neutral shadows. The only light effect in the system is the drawn halo around the sun. */
  --shadow-card: 0 1px 2px rgb(20 18 61 / 0.06), 0 8px 24px rgb(20 18 61 / 0.08);
  --shadow-sheet: 0 -12px 40px rgb(20 18 61 / 0.2);
  --shadow-press: 0 6px 16px rgb(20 18 61 / 0.22);
  --border-width: 1px;
  --focus-ring: 0 0 0 3px var(--color-background), 0 0 0 5px var(--color-focus);

  /* MOTION. Transform and opacity only; nothing past 320ms because the slowest phone in the brief is a budget Android on 4G. */
  --duration-fast: 120ms;
  --duration-default: 200ms;
  --duration-slow: 320ms;
  --duration-loop: 2600ms;       /* one full cycle of an exercise animation: pose A, change, pose B, change back */
  --duration-draw: 560ms;        /* only the gauge arc and bars drawing in on arrival */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* DARK THEME. Same names, new values. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #050507;
    --color-surface: rgb(255 255 255 / 0.05);
    --color-surface-raised: rgb(255 255 255 / 0.08);
    --color-surface-sunken: rgb(0 0 0 / 0.35);
    --color-border: rgb(255 255 255 / 0.12);
    --color-border-strong: rgb(255 255 255 / 0.3);
    --color-text-primary: #ffffff;
    --color-text-secondary: rgb(255 255 255 / 0.72);
    --color-text-muted: rgb(255 255 255 / 0.46);
    --color-action: #22c55e;
    --color-action-hover: #4ade80;
    --color-action-pressed: #16a34a;
    --color-action-soft: #14532d;
    --color-action-text: #86efac;
    --color-text-on-action: #052e16;
    --color-accent: #4ade80;
    --color-accent-soft: #14532d;
    --color-accent-text: #86efac;
    --color-text-on-accent: #052e16;
    --color-flame: #ff7a57;
    --color-flame-soft: #43201a;
    --color-flame-text: #ff9c80;
    --color-focus: #4ade80;
    --color-success: #2dd4bf;  --color-success-soft: #134e4a;
    --color-warning: #f2b866;  --color-warning-soft: #38290f;
    --color-error: #ff8f9a;    --color-error-soft: #451823;
    --color-info: #86b4ff;     --color-info-soft: #14284a;
    --color-over: #f0a27a;     --color-over-soft: #382116;
    --color-macro-protein: #7aa8ff;
    --color-macro-carbs: #f0b04a;
    --color-macro-fat: #ff86ae;
    --color-chart-grid: rgb(255 255 255 / 0.12);
    --color-overlay: rgb(0 0 0 / 0.62);
    --shadow-card: none;
    --shadow-sheet: 0 -12px 40px rgb(0 0 0 / 0.55);
    --shadow-press: 0 6px 16px rgb(0 0 0 / 0.45);
  }
}
:root[data-theme="dark"] {
  --color-background: #050507;
  --color-surface: rgb(255 255 255 / 0.05);
  --color-surface-raised: rgb(255 255 255 / 0.08);
  --color-surface-sunken: rgb(0 0 0 / 0.35);
  --color-border: rgb(255 255 255 / 0.12);
  --color-border-strong: rgb(255 255 255 / 0.3);
  --color-text-primary: #ffffff;
  --color-text-secondary: rgb(255 255 255 / 0.72);
  --color-text-muted: rgb(255 255 255 / 0.46);
  --color-action: #22c55e;
  --color-action-hover: #4ade80;
  --color-action-pressed: #16a34a;
  --color-action-soft: #14532d;
  --color-action-text: #86efac;
  --color-text-on-action: #052e16;
  --color-accent: #4ade80;
  --color-accent-soft: #14532d;
  --color-accent-text: #86efac;
  --color-text-on-accent: #052e16;
  --color-flame: #ff7a57;
  --color-flame-soft: #43201a;
  --color-flame-text: #ff9c80;
  --color-focus: #4ade80;
  --color-success: #2dd4bf;  --color-success-soft: #134e4a;
  --color-warning: #f2b866;  --color-warning-soft: #38290f;
  --color-error: #ff8f9a;    --color-error-soft: #451823;
  --color-info: #86b4ff;     --color-info-soft: #14284a;
  --color-over: #f0a27a;     --color-over-soft: #382116;
  --color-macro-protein: #7aa8ff;
  --color-macro-carbs: #f0b04a;
  --color-macro-fat: #ff86ae;
  --color-chart-grid: rgb(255 255 255 / 0.12);
  --color-overlay: rgb(0 0 0 / 0.62);
  --shadow-card: none;
  --shadow-sheet: 0 -12px 40px rgb(0 0 0 / 0.55);
  --shadow-press: 0 6px 16px rgb(0 0 0 / 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-default: 0ms; --duration-slow: 0ms; --duration-draw: 0ms; --duration-loop: 0ms; }
}