/**
 * Dayly — design tokens.
 *
 * Single source of truth for colour, type, space, radius, elevation and motion.
 * Nothing in the app should hardcode a hex value, px size, or duration; if a
 * value is needed twice, it belongs here.
 *
 * Dark is the default and is designed deliberately — a very dark charcoal base
 * with progressively lighter surfaces for elevation, rather than pure black with
 * inverted colours. Light mode is a separate, intentional palette, not a filter.
 */

:root {
  /* -----------------------------------------------------------------------
   * Surfaces — elevation is expressed by lightness, not by borders or shadows.
   * Each step up is a surface that sits "closer" to the viewer.
   * --------------------------------------------------------------------- */
  --bg: #0c0c0e;              /* app background — charcoal, never #000 */
  --surface-1: #151518;       /* cards */
  --surface-2: #1d1d21;       /* raised: inputs, nested rows, sheets */
  --surface-3: #26262b;       /* hover / pressed states */
  --scrim: rgba(0, 0, 0, 0.6); /* behind modals and sheets */

  /* Hairlines. Deliberately faint — hierarchy comes from space and type,
   * with borders used only where a boundary genuinely needs stating. */
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);

  /* -----------------------------------------------------------------------
   * Text — a three-step ramp. Primary carries the number, secondary the label,
   * tertiary the incidental. All meet WCAG AA on --surface-1 or darker.
   * --------------------------------------------------------------------- */
  --text: #f4f4f6;
  --text-secondary: #a0a0aa;
  --text-tertiary: #70707a;
  --text-inverse: #0c0c0e;

  /* -----------------------------------------------------------------------
   * Accent and state.
   * --------------------------------------------------------------------- */
  --accent: #4c8dff;
  --accent-hover: #6ba0ff;
  --accent-soft: rgba(76, 141, 255, 0.14);
  --accent-text: #ffffff;

  --success: #3ddc84;
  --success-soft: rgba(61, 220, 132, 0.14);
  --warning: #ffb020;
  --warning-soft: rgba(255, 176, 32, 0.14);
  --danger: #ff5f56;
  --danger-soft: rgba(255, 95, 86, 0.14);

  /* -----------------------------------------------------------------------
   * Metric colours. Assigned per nutrient so a given metric reads the same
   * everywhere — ring, bar, chart, legend. Never reused for status.
   * --------------------------------------------------------------------- */
  --metric-calories: #4c8dff;
  --metric-protein: #3ddc84;
  --metric-fiber: #b98cff;
  --metric-fat: #ffc44d;
  --metric-water: #4fc3f7;
  --metric-sleep: #8b8bff;
  --metric-activity: #ff8a65;

  /* Track behind any progress indicator. */
  --track: rgba(255, 255, 255, 0.09);

  /* -----------------------------------------------------------------------
   * Typography. System stack — no webfont, no network cost, native rendering.
   * The ramp is deliberately short: display for the one number that matters,
   * body for everything else, caption for labels.
   * --------------------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-numeric: var(--font);

  --text-display: 2.75rem;   /* 44px — the single hero number on a screen */
  --text-metric: 1.75rem;    /* 28px — card headline values */
  --text-title: 1.3125rem;   /* 21px — page + section titles */
  --text-body: 1rem;         /* 16px */
  --text-small: 0.875rem;    /* 14px */
  --text-caption: 0.75rem;   /* 12px — labels, units, meta */

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

  --leading-tight: 1.15;
  --leading-normal: 1.45;

  /* Tightened tracking on large numerals; loosened on small caps labels. */
  --tracking-display: -0.02em;
  --tracking-label: 0.04em;

  /* -----------------------------------------------------------------------
   * Space — 4px base. Use the scale, not arbitrary values.
   * --------------------------------------------------------------------- */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* -----------------------------------------------------------------------
   * Radius.
   * --------------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------------------
   * Elevation. Used sparingly — only for genuinely floating surfaces
   * (sheets, popovers). Cards rely on surface lightness instead.
   * --------------------------------------------------------------------- */
  --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.5);
  --shadow-popover: 0 8px 32px rgba(0, 0, 0, 0.45);

  /* -----------------------------------------------------------------------
   * Layout. Content is centred and capped so cards never stretch across an
   * ultrawide monitor; the rail sits outside that measure.
   * --------------------------------------------------------------------- */
  --content-max: 1180px;
  --rail-width: 232px;
  --rail-width-collapsed: 72px;
  --tabbar-height: 60px;
  --gutter: var(--space-5);

  /* -----------------------------------------------------------------------
   * Motion. Short, eased, and purposeful. Anything longer than 240ms reads
   * as sluggish on a screen people open twenty times a day.
   * --------------------------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Focus ring — always visible on keyboard focus, never removed. */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* ---------------------------------------------------------------------------
 * Light mode. A separate palette: warm-neutral greys rather than inverted
 * darks, so it reads as daylight rather than a washed-out negative.
 * ------------------------------------------------------------------------- */
:root[data-theme='light'] {
  --bg: #f6f6f8;
  --surface-1: #ffffff;
  --surface-2: #f1f1f4;
  --surface-3: #e7e7ec;
  --scrim: rgba(20, 20, 24, 0.35);

  --border: rgba(16, 16, 20, 0.08);
  --border-strong: rgba(16, 16, 20, 0.16);

  --text: #16161a;
  --text-secondary: #5c5c66;
  --text-tertiary: #8a8a94;
  --text-inverse: #ffffff;

  --accent: #2f6fe4;
  --accent-hover: #2560cc;
  --accent-soft: rgba(47, 111, 228, 0.1);

  --success: #16a34a;
  --success-soft: rgba(22, 163, 74, 0.1);
  --warning: #b45309;
  --warning-soft: rgba(180, 83, 9, 0.1);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.1);

  --metric-calories: #2f6fe4;
  --metric-protein: #16a34a;
  --metric-fiber: #7c3aed;
  --metric-fat: #c2860b;
  --metric-water: #0284c7;
  --metric-sleep: #4f46e5;
  --metric-activity: #ea580c;

  --track: rgba(16, 16, 20, 0.1);

  --shadow-sheet: 0 -8px 40px rgba(16, 16, 20, 0.14);
  --shadow-popover: 0 8px 32px rgba(16, 16, 20, 0.12);
}

/* Follow the OS when the user hasn't chosen explicitly. The app writes
 * data-theme on <html> once a preference exists in Settings. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']):not([data-theme='light']) {
    color-scheme: light;
  }
}

/* Respect reduced-motion: keep state changes instant rather than animated.
 * Transitions are collapsed rather than removed so nothing depends on
 * transitionend never firing. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}