/* ==========================================================================
   Colour profile.

   Built from #5F6F3E / #D9D7CC / #B8B2A6 / #3A3F2D / #FFFFFF, extended into
   four families: sand (all neutrals), olive (brand), rust (danger/warning),
   teal (info badges).

   TOP HALF is the palette. Nothing outside this file should reference it.
   BOTTOM HALF names the jobs. Components use only --c-* names.
   To reskin the app, change the bottom half's pointers, not the hexes.
   ========================================================================== */

:root {

  /* Sand — every background, border and grey text --------------- */
  --n-0:           #ffffff;   /* white — cards, inputs */
  --n-50:          #f8f7f1;   /* page background */
  --n-100:         #f2f0e8;   /* table headers, dropdown header */
  --n-200:         #eae8de;   /* hover fill */
  --n-300:         #e3e0d5;   /* row separators, sunken fills */
  --n-400:         #dad7cc;   /* card borders, today's row */
  --n-500:         #b6b3a8;   /* input + button borders (your #B8B2A6) */
  --n-600:         #959289;   /* hover borders */
  --n-700:         #828078;   /* hints, empty states */
  --n-800:         #68665f;   /* labels, meta, units */
  --n-900:         #4f4d47;   /* secondary text, pills */

  /* Olive — brand, add button, progress, body text -------------- */
  --olive-100:     #e4ebd6;   /* today badge fill */
  --olive-200:     #cfdab7;   /* progress bar track */
  --olive-500:     #7a8b50;   /* macro bar fill */
  --olive-600:     #616f3d;   /* add (+) button, links (your #5F6F3E) */
  --olive-700:     #4d5831;   /* add button hover */
  --olive-800:     #393f2d;   /* body text, headings (your #3A3F2D) */
  --olive-600-rgb: 97, 111, 61;   /* --olive-600 as a triplet, for alpha */
  --olive-800-rgb: 57, 63, 45;    /* --olive-800 as a triplet, for shadows */
  --olive-600-a10: rgba(var(--olive-600-rgb), 0.10);  /* area under kcal line */
  --olive-600-a25: rgba(var(--olive-600-rgb), 0.25);  /* focus ring */

  /* Rust — delete, over goal, errors, warnings ------------------ */
  --rust-50:       #fbe8e2;   /* error flash fill */
  --rust-100:      #f8d6c9;   /* warning badge fill */
  --rust-200:      #f4c3b0;   /* error flash border */
  --rust-400:      #c8714f;   /* progress bar when over goal */
  --rust-500:      #b25630;   /* over-goal numbers, input errors */
  --rust-600:      #974522;   /* error text */
  --rust-700:      #7b3618;   /* delete (x) button */
  --rust-800:      #5c2711;   /* delete button hover, warning badge text */
  --rust-900:      #461e0d;   /* error badge text */

  /* Wheat — attention without alarm. The one gap in your four families:
     a field that just autofilled is not an error and not information, and
     borrowing rust or teal for it said the wrong thing. ------------- */
  --wheat-50:      #faf3df;   /* autofill flash fill */
  --wheat-200:     #ecdcb0;   /* autofill flash border */

  /* Teal — info badges only ------------------------------------- */
  --teal-50:       #dbf0f2;   /* shared / suggestion badge fill */
  --teal-200:      #bae0e4;   /* info border */
  --teal-700:      #2f757c;   /* info accents */
  --teal-800:      #1f5c63;   /* shared / suggestion badge text */

  /* Category tags (ticket 09) — fill / dot / text per category. Food
     categories run plant → animal: greens, wheat, dairy creams, sea, rust;
     the rest sit off that axis in blue, plum and cinnamon. Övrigt is sand. */
  --tag-gronsaker-50:  #e1ebd2;  --tag-gronsaker-500: #5b7f2e;  --tag-gronsaker-800: #344a18;  /* leaf */
  --tag-frukt-50:  #edf0cc;  --tag-frukt-500: #99a12c;  --tag-frukt-800: #4f5416;  /* lime */
  --tag-baljvaxter-50:  #e8e6cc;  --tag-baljvaxter-500: #878146;  --tag-baljvaxter-800: #4a4623;  /* khaki */
  --tag-spannmal-50:  #f5ebd2;  --tag-spannmal-500: #c49a3c;  --tag-spannmal-800: #634b14;  /* wheat */
  --tag-mejeri-50:  #ece5d2;  --tag-mejeri-500: #b3a381;  --tag-mejeri-800: #574b30;  /* cream */
  --tag-ost-50:  #fbe7bb;  --tag-ost-500: #dca128;  --tag-ost-800: #654408;  /* cheese */
  --tag-fisk-50:  #dbeaee;  --tag-fisk-500: #3f8a99;  --tag-fisk-800: #1d4f5c;  /* sea */
  --tag-kott-50:  #f6ddd1;  --tag-kott-500: #b25630;  --tag-kott-800: #62270f;  /* rust */
  --tag-dryck-50:  #dfe7f2;  --tag-dryck-500: #5a7fb0;  --tag-dryck-800: #28446a;  /* blue */
  --tag-snacks-50:  #f2dfe9;  --tag-snacks-500: #b0587f;  --tag-snacks-800: #622848;  /* plum */
  --tag-kryddor-50:  #eee0cf;  --tag-kryddor-500: #9a6a3a;  --tag-kryddor-800: #533517;  /* cinnamon */

  /* ======================================================================
     What each colour is used for. Names unchanged from your old file —
     this drops straight in.
     ====================================================================== */

  /* Brand */
  --c-accent:       var(--olive-600);   /* Add (+) button */
  --c-accent-hover: var(--olive-700);   /* Add (+) button, hover */

  /* Destructive */
  --c-danger:       var(--rust-700);    /* delete (x) buttons */
  --c-danger-hover: var(--rust-800);    /* delete (x) buttons, hover */
  --c-alert:        var(--rust-500);    /* over-goal, warnings, input errors */

  /* Text — your 10 greys collapsed to 5. Where two names now point at the
     same colour, they were never distinguishable on screen anyway. */
  --c-text:          var(--olive-800);  /* body text, headings */
  --c-text-black:    var(--olive-800);  /* link hover  == --c-text */
  --c-text-dark:     var(--n-900);      /* secondary buttons, pills */
  --c-text-mid:      var(--n-900);      /* table sub-rows  == --c-text-dark */
  --c-text-muted:    var(--n-800);      /* nav, labels, meta */
  --c-text-soft:     var(--n-800);      /* units  == --c-text-muted */
  --c-text-faint:    var(--n-700);      /* hints, empty states */
  --c-text-fainter:  var(--n-700);      /* .muted  == --c-text-faint */
  --c-text-faintest: var(--n-600);      /* indent arrows, freq hints */

  /* Surfaces */
  --c-surface:        var(--n-0);       /* cards, inputs, dropdowns */
  --c-surface-alt:    var(--n-100);     /* today's row, dropdown header */
  --c-surface-page:   var(--n-50);      /* page background, table headers */
  --c-surface-hover:  var(--n-200);     /* hover fill on pills and buttons */
  --c-surface-mute:   var(--n-200);     /* inline input  == --c-surface-hover */
  --c-surface-line:   var(--n-300);     /* card borders, sunken fills */
  --c-surface-active: var(--n-400);     /* pressed / active fill */

  /* Borders */
  --c-border:        var(--n-500);      /* inputs, buttons, cards */
  --c-border-soft:   var(--n-400);      /* nav underline, admin inputs */
  --c-border-faint:  var(--n-300);      /* table row separators */
  --c-border-strong: var(--n-600);      /* hover borders */
  --c-border-focus:  var(--n-700);      /* focused inputs */

  /* Under goal / on track — olive, not green. Normal is not an event. */
  --c-success:            var(--olive-500);  /* goal + macro bar fill */
  --c-success-dark:       var(--olive-700);  /* today badge text */
  --c-success-soft-bg:    var(--olive-100);  /* today badge fill */
  --c-success-text:       var(--olive-700);  /* flash  == --c-success-dark */
  --c-success-bg:         var(--olive-100);  /* flash success fill */
  --c-success-border:     var(--olive-200);  /* flash success border */
  --c-success-badge-bg:   var(--olive-100);  /* verified badge, admin role */
  --c-success-badge-text: var(--olive-800);  /* verified badge, admin role */

  /* Over goal / errors */
  --c-error-text:       var(--rust-600);  /* flash error, danger button */
  --c-error-bg:         var(--rust-50);   /* flash error fill */
  --c-error-border:     var(--rust-200);  /* flash error border */
  --c-error-bg-strong:  var(--rust-100);  /* danger hover, bug badge */
  --c-error-badge-text: var(--rust-900);  /* bug badge, inactive role */

  /* Info / warning / neutral badges */
  --c-info-bg:      var(--teal-50);   /* shared + suggestion badges */
  --c-info-text:    var(--teal-800);  /* shared + suggestion badges */
  --c-warning-bg:   var(--rust-100);  /* unverified badge */
  --c-warning-text: var(--rust-800);  /* unverified badge */
  --c-warning:      var(--rust-700);  /* import/export warning text */
  --c-neutral-bg:   var(--n-300);     /* personal badge, user role */
  --c-neutral-text: var(--n-900);     /* personal badge, user role */

  /* Data — the three macros, one per family, so charts stay in the same key */
  --c-macro-carbs:   var(--teal-700);   /* carbs  — teal  */
  --c-macro-protein: var(--olive-500);  /* protein — olive */
  --c-macro-fat:     var(--rust-500);   /* fat    — rust  */

  /* Charts */
  --c-chart-line: var(--olive-600);      /* kcal trend line */
  --c-chart-fill: var(--olive-600-a10);  /* area under the trend line */
  --c-chart-goal: var(--n-500);          /* dashed goal line */
  --c-chart-grid: var(--n-300);          /* y-axis gridlines */
  --c-chart-gap:  var(--n-0);            /* slice separators */

  /* Transient highlight — fields just filled in for you */
  --c-highlight-bg:     var(--wheat-50);
  --c-highlight-border: var(--wheat-200);

  /* Category tags — pills and read-only tags (ticket 09) */
  --c-cat-gronsaker-bg: var(--tag-gronsaker-50);  --c-cat-gronsaker-dot: var(--tag-gronsaker-500);  --c-cat-gronsaker-text: var(--tag-gronsaker-800);
  --c-cat-frukt-bg: var(--tag-frukt-50);  --c-cat-frukt-dot: var(--tag-frukt-500);  --c-cat-frukt-text: var(--tag-frukt-800);
  --c-cat-baljvaxter-bg: var(--tag-baljvaxter-50);  --c-cat-baljvaxter-dot: var(--tag-baljvaxter-500);  --c-cat-baljvaxter-text: var(--tag-baljvaxter-800);
  --c-cat-spannmal-bg: var(--tag-spannmal-50);  --c-cat-spannmal-dot: var(--tag-spannmal-500);  --c-cat-spannmal-text: var(--tag-spannmal-800);
  --c-cat-mejeri-bg: var(--tag-mejeri-50);  --c-cat-mejeri-dot: var(--tag-mejeri-500);  --c-cat-mejeri-text: var(--tag-mejeri-800);
  --c-cat-ost-bg: var(--tag-ost-50);  --c-cat-ost-dot: var(--tag-ost-500);  --c-cat-ost-text: var(--tag-ost-800);
  --c-cat-fisk-bg: var(--tag-fisk-50);  --c-cat-fisk-dot: var(--tag-fisk-500);  --c-cat-fisk-text: var(--tag-fisk-800);
  --c-cat-kott-bg: var(--tag-kott-50);  --c-cat-kott-dot: var(--tag-kott-500);  --c-cat-kott-text: var(--tag-kott-800);
  --c-cat-dryck-bg: var(--tag-dryck-50);  --c-cat-dryck-dot: var(--tag-dryck-500);  --c-cat-dryck-text: var(--tag-dryck-800);
  --c-cat-snacks-bg: var(--tag-snacks-50);  --c-cat-snacks-dot: var(--tag-snacks-500);  --c-cat-snacks-text: var(--tag-snacks-800);
  --c-cat-kryddor-bg: var(--tag-kryddor-50);  --c-cat-kryddor-dot: var(--tag-kryddor-500);  --c-cat-kryddor-text: var(--tag-kryddor-800);
  --c-cat-ovrigt-bg: var(--n-300);  --c-cat-ovrigt-dot: var(--n-600);  --c-cat-ovrigt-text: var(--n-900);

  /* Elevation. Tinted with --olive-800 rather than black: a neutral-black
     shadow over warm sand reads as grey dirt. */
  --c-shadow-sm:    0 1px 2px rgba(var(--olive-800-rgb), 0.06);
  --c-shadow-md:    0 4px 12px rgba(var(--olive-800-rgb), 0.10);
  --c-shadow-up:    0 -2px 8px rgba(var(--olive-800-rgb), 0.07);
  --c-shadow-up-lg: 0 -4px 16px rgba(var(--olive-800-rgb), 0.14);

  /* Focus. Was `outline: none` plus a border tint, which is invisible to
     anyone tabbing through the form. This is the visible ring. */
  --c-focus:      var(--olive-600);
  --c-focus-ring: var(--olive-600-a25);


  /* ======================================================================
     TYPE. Same contract as the colours: the scale is the palette, and the
     --t- / --fw- / --lh- names are the jobs. Sizes are in rem so the
     browser's own font-size setting still works.
     ====================================================================== */

  /* Families */
  --font-sans:  'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* Size scale. Your 19 ad-hoc sizes collapsed to 8 steps — 0.8/0.82/0.85/
     0.88rem were four separate values nobody could tell apart. */
  --t-2xs:     0.6875rem;  /* 11px — micro labels, freq hints */
  --t-xs:      0.75rem;    /* 12px — hints, photo labels */
  --t-sm:      0.8125rem;  /* 13px — muted text, badges, legends */
  --t-md:      0.875rem;   /* 14px — tables, secondary controls */
  --t-base:    0.9375rem;  /* 15px — body */
  --t-lg:      1.125rem;   /* 18px — h3, card titles */
  --t-xl:      1.375rem;   /* 22px — h2, page titles */
  --t-display: 2rem;       /* 32px — today's kcal figure */

  /* Weights */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line heights — unitless, so they scale with the element's own size */
  --lh-flat:   1;      /* single-line numerals, icon buttons */
  --lh-tight:  1.2;    /* display figures */
  --lh-snug:   1.35;   /* headings */
  --lh-normal: 1.55;   /* body copy, table cells */
  --lh-loose:  1.8;    /* legends, spaced lists */

  /* Letter spacing */
  --ls-display: -0.015em;  /* big figures tighten up */
  --ls-heading: -0.005em;
  --ls-caps:    0.05em;    /* uppercase micro-labels need air */
}