/*
 * Dietario design system: tokens.
 *
 * Every visual decision lives here as a custom property. Components
 * (components.css) only reference these tokens, never raw values.
 * Names are prefixed `--ds-` so they can coexist with the legacy
 * main.css while pages are migrated one by one.
 *
 * Breakpoints cannot be custom properties inside @media. The system uses
 * exactly two, written literally in components.css:
 *   phone:   max-width 720px
 *   desktop: min-width 1040px (two-column layouts collapse below this)
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../../fonts/bricolage-grotesque-latin.b7df97614c8e.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../../fonts/dm-sans-latin.d4c68940b772.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces and ink */
  --ds-bg: #f2f4ef;
  --ds-surface: #ffffff;
  --ds-ink: #14231b;
  --ds-ink-2: #3e4e44;
  --ds-muted: #5a6a60;
  --ds-line: #dce2da;
  --ds-line-2: #ebefe9;
  --ds-field: #b2beb5;

  /* Brand (primary actions, selected state) */
  --ds-brand: #1f6b4a;
  --ds-brand-ink: #14503a;
  --ds-brand-soft: #e1efe6;

  /* "Next step" accent: the one thing to do now */
  --ds-next: #a8480a;
  --ds-next-soft: #fcebd6;
  --ds-next-line: #f0cfa6;
  --ds-next-ink: #8a3b05;
  --ds-on-brand: #ffffff;

  /* Problems */
  --ds-warn: #9a3412;
  --ds-warn-soft: #fde9e2;

  /* Macronutrients: fixed colours, fixed order (protein, carbs, fat, fibre) */
  --ds-macro-protein: #3b63b8;
  --ds-macro-carbs: #e0a526;
  --ds-macro-fat: #d2566b;
  --ds-macro-fibre: #8a5bb5;

  /* Tile tints (initials, category swatches). Pairs of background + ink. */
  --ds-tint-1-bg: #e1efe6; --ds-tint-1-ink: #14503a;
  --ds-tint-2-bg: #fcebd6; --ds-tint-2-ink: #8a3b05;
  --ds-tint-3-bg: #e3e9f7; --ds-tint-3-ink: #2a3f7a;
  --ds-tint-4-bg: #f4e3ee; --ds-tint-4-ink: #7a2a5f;
  --ds-tint-5-bg: #efead3; --ds-tint-5-ink: #6b5a12;

  /* Type */
  --ds-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --ds-font: "DM Sans", system-ui, sans-serif;
  --ds-text-xs: 0.75rem;   /* 12 */
  --ds-text-sm: 0.8125rem; /* 13 */
  --ds-text-base: 0.9375rem; /* 15 */
  --ds-text-md: 1.0625rem; /* 17 */
  --ds-text-lg: 1.25rem;   /* 20 */
  --ds-text-xl: 1.75rem;   /* 28 */
  --ds-text-2xl: 2.125rem; /* 34 */
  --ds-text-3xl: 2.75rem;  /* 44 */

  /* Spacing (4 px grid) */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.5rem;
  --ds-space-6: 2rem;
  --ds-space-7: 3rem;

  /* Shape */
  --ds-radius-sm: 0.5rem;
  --ds-radius: 0.75rem;
  --ds-radius-lg: 1.125rem;
  --ds-radius-pill: 999px;

  /* Elevation */
  --ds-shadow-menu: 0 12px 32px rgba(20, 35, 27, 0.14);

  /* Interaction */
  --ds-target: 2.75rem; /* 44 px minimum touch target */
  --ds-focus: 0 0 0 3px #fff, 0 0 0 5px var(--ds-brand);
  --ds-page-max: 70rem; /* 1120 px */
  --ds-gutter: 2rem;
}

@media (max-width: 720px) {
  :root {
    --ds-gutter: 1rem;
    --ds-text-2xl: 1.75rem;
    --ds-text-3xl: 2.25rem;
  }
}