/* ============================================
   PortionPilot design tokens — the locked design system (#1028)
   Claude Design "PortionPilot Design System v11 - LOCKED spec".
   Beet for actions only, a dew page with white blocks, errors orange
   with an octagon, warnings amber with a triangle, one font.
   ============================================ */

:root {
  /* ==========================================
     Action colour (Beet). Only actions use it: the main button, the mic,
     the selection check, links, focus, and the day kcal bar.
     ========================================== */
  --fs-primary: #b3124e; /* Beet — 6.8:1 with white text */
  --fs-primary-hover: #a71149; /* Pointer hover */
  --fs-primary-active: #9a0f43; /* Pressed, and the recording mic */
  --fs-primary-light: #fbeef3; /* Beet tint — recording halo, pale action backgrounds */
  --fs-primary-bg: #f7dde7; /* A step deeper than the tint */
  --fs-primary-border: #d97d9f; /* Beet at border strength */

  /* ==========================================
     Former secondary accent. The locked system has ONE action colour, so the
     accent now follows Beet; kept as a name so existing rules keep working.
     ========================================== */
  --fs-accent: #b3124e;
  --fs-accent-hover: #a71149;
  --fs-accent-light: #fbeef3;
  --fs-accent-bg: #fbeef3;
  --fs-accent-border: #d97d9f;

  /* ==========================================
     States. Colour is for exceptions only: "on target" / success is plain ink
     with a check. Errors are orange with an octagon + "Error"; warnings amber
     with a triangle + "Heads-up" — never colour alone.
     ========================================== */
  --fs-success: #1a1a1a;
  --fs-success-light: #f6f6f4;
  --fs-success-text: #1a1a1a;
  --fs-error: #b44a00; /* 5.4:1 on white, 4.8:1 on the dew page, 5.1:1 on its tint */
  --fs-error-light: #fef7f3;
  --fs-error-text: #b44a00;
  --fs-warning: #835a01; /* 6.0:1 on white */
  --fs-warning-light: #fdf3dc;
  --fs-warning-text: #835a01;

  /* Macro colours — single source of truth (protein navy, carbs teal, fat ochre).
     They colour the P/C/F key squares and the bar fills. Macro NUMBERS are ink,
     so the *-text variants are ink. kcal numbers are ink too; the day kcal bar
     fill is --fs-macro-kcal-fill (Beet). */
  --fs-macro-protein: #25406e;
  --fs-macro-carbs: #00766a;
  --fs-macro-fat: #8a6400;
  --fs-macro-kcal: #1a1a1a;

  /* No filled macro pills in the locked system: chip tints are the neutral tonal surface. */
  --fs-macro-carbs-light: #f6f6f4;
  --fs-macro-fat-light: #f6f6f4;
  --fs-macro-protein-light: #f6f6f4;

  --fs-macro-protein-text: #1a1a1a;
  --fs-macro-carbs-text: #1a1a1a;
  --fs-macro-fat-text: #1a1a1a;

  /* Target zone: one neutral grey band for every bar, so macro colour lives only in the fill. */
  --fs-macro-protein-zone: rgba(26, 26, 26, 0.1);
  --fs-macro-carbs-zone: rgba(26, 26, 26, 0.1);
  --fs-macro-fat-zone: rgba(26, 26, 26, 0.1);
  --fs-macro-kcal-zone: rgba(26, 26, 26, 0.1);

  /* ==========================================
     Range-bar marks — ONE source, shared by every bar that draws a value against a
     target range (the daily row and the meal-compare bars). Each mark encodes a fact
     about the data, so it may not vary between screens; only scale may. Track height
     is deliberately NOT here — it is density, set per host via --rb-track-height.
     ========================================== */

  /* Past the ceiling. Grey, never red: surplus is not a failure in this product's language. */
  --fs-range-overshoot: #57544f;

  /* A bound. One solid colour; the earlier white-core-plus-ring drew a closed 1px outline
     around a 2px box, which at this size reads as "[]" rather than as a mark.
     Opaque, and the overhang is a fixed length rather than a percentage, because the part of
     the mark that crosses a fill cannot win on contrast — dark on the dark calories fill is
     ~1.9:1 whatever we pick, and going light loses the pale track instead. The ends carry the
     mark: they sit against the page at ~17:1, and 3px is legible on the 6px calorie strip as
     well as the 12px card row. A percentage gave the strip 1.5px, which is not. */
  --fs-range-notch-width: 2px;
  --fs-range-notch-color: #57544f;
  --fs-range-notch-overhang: 3px;

  /* The zone's edges fade rather than cut: IsWithinRange accepts within
     MacroAcceptanceTolerance (±1 g, ±5 kcal), so a hard edge would claim a precision the
     matcher does not enforce. */
  --fs-range-zone-fade: 14%;

  /* Depth of the arrowhead when a value runs off the end of the track. */
  --fs-range-terminus: 6px;

  /* ==========================================
     Neutral Colors (Grays)
     ========================================== */
  --fs-text-primary: #1a1a1a; /* Ink */
  --fs-text-body: #4b4945; /* Strong body text, one step lighter than primary */
  --fs-text-secondary: #4b4945; /* Secondary text, placeholders */
  --fs-text-muted: #57544f; /* Muted text, disabled states */
  --fs-text-inverse: #ffffff; /* White text on dark backgrounds */

  /* ==========================================
     Background Colors
     ========================================== */
  --fs-bg-primary: #ffffff; /* Main background */
  --fs-bg-secondary: #f6f6f4; /* Secondary background */
  --fs-bg-tertiary: #f6f6f4; /* Tertiary background */
  --fs-bg-hover: #f6f6f4; /* Hover background */
  --fs-bg-selected: #f6f6f4; /* Selected item background */

  /* ==========================================
     Border Colors
     ========================================== */
  --fs-border-default: #ecebe8; /* Default border */
  --fs-border-hover: #dcdad6; /* Hover border */
  --fs-border-focus: #b3124e; /* Focus border (primary color) */
  --fs-border-selected: #b3124e; /* Selected border */
  --fs-border-control: #8f8b85; /* Edge that must read as a control: 3.4:1 on white, 3.1:1 on dew (WCAG 1.4.11) */

  /* Disabled pill (spec v11): a flat tone and a quiet label, so it never reads as a live secondary. */
  --fs-disabled-bg: #efeeeb;
  --fs-disabled-text: #8f8b85;

  /* ==========================================
     Voice recording state. Its own role (not error): recording is an action in progress,
     not a failure, so the restyle can give it the action colour without touching errors.
     ========================================== */
  --fs-recording: #9a0f43;
  --fs-recording-hover: #a71149;

  /* ==========================================
     Alpha variants (#1028) — glows, rings, pulses and tints. Named <role>-a<percent> and built
     from the role's base colour, so re-pointing a role means editing only this block.
     ========================================== */
  --fs-accent-a08: rgba(179, 18, 78, 0.08);
  --fs-accent-a10: rgba(179, 18, 78, 0.1);
  --fs-accent-a14: rgba(179, 18, 78, 0.14);
  --fs-accent-a15: rgba(179, 18, 78, 0.15);
  --fs-accent-a20: rgba(179, 18, 78, 0.2);
  --fs-accent-a30: rgba(179, 18, 78, 0.3);
  --fs-accent-a35: rgba(179, 18, 78, 0.35);
  --fs-accent-a40: rgba(179, 18, 78, 0.4);
  --fs-error-a15: rgba(180, 74, 0, 0.15);
  --fs-error-a18: rgba(180, 74, 0, 0.18);
  --fs-primary-a00: rgba(179, 18, 78, 0);
  --fs-primary-a02: rgba(179, 18, 78, 0.02);
  --fs-primary-a03: rgba(179, 18, 78, 0.03);
  --fs-primary-a05: rgba(179, 18, 78, 0.05);
  --fs-primary-a08: rgba(179, 18, 78, 0.08);
  --fs-primary-a10: rgba(179, 18, 78, 0.1);
  --fs-primary-a12: rgba(179, 18, 78, 0.12);
  --fs-primary-a15: rgba(179, 18, 78, 0.15);
  --fs-primary-a18: rgba(179, 18, 78, 0.18);
  --fs-primary-a20: rgba(179, 18, 78, 0.2);
  --fs-primary-a25: rgba(179, 18, 78, 0.25);
  --fs-primary-a28: rgba(179, 18, 78, 0.28);
  --fs-primary-a30: rgba(179, 18, 78, 0.3);
  --fs-primary-a35: rgba(179, 18, 78, 0.35);
  --fs-primary-a40: rgba(179, 18, 78, 0.4);
  --fs-primary-a45: rgba(179, 18, 78, 0.45);
  --fs-primary-a50: rgba(179, 18, 78, 0.5);
  --fs-primary-a60: rgba(179, 18, 78, 0.6);
  --fs-primary-a62: rgba(179, 18, 78, 0.62);
  --fs-recording-a00: rgba(154, 15, 67, 0);
  --fs-recording-a18: rgba(154, 15, 67, 0.18);
  --fs-recording-a20: rgba(154, 15, 67, 0.2);
  --fs-recording-a30: rgba(154, 15, 67, 0.3);
  --fs-recording-a40: rgba(154, 15, 67, 0.4);
  --fs-recording-a50: rgba(154, 15, 67, 0.5);
  --fs-success-a00: rgba(26, 26, 26, 0);
  --fs-success-a05: rgba(26, 26, 26, 0.05);
  --fs-success-a10: rgba(26, 26, 26, 0.1);
  --fs-success-a15: rgba(26, 26, 26, 0.15);
  --fs-success-a20: rgba(26, 26, 26, 0.2);
  --fs-success-a22: rgba(26, 26, 26, 0.22);
  --fs-success-a30: rgba(26, 26, 26, 0.3);
  --fs-success-a40: rgba(26, 26, 26, 0.4);
  --fs-success-a50: rgba(26, 26, 26, 0.5);
  --fs-text-primary-a04: rgba(26, 26, 26, 0.04);
  --fs-text-primary-a05: rgba(26, 26, 26, 0.05);
  --fs-text-primary-a34: rgba(26, 26, 26, 0.34);
  --fs-text-primary-a85: rgba(26, 26, 26, 0.85);
  --fs-text-primary-a95: rgba(26, 26, 26, 0.95);
  --fs-text-secondary-a05: rgba(75, 73, 69, 0.05);
  --fs-text-secondary-a06: rgba(75, 73, 69, 0.06);
  --fs-text-secondary-a08: rgba(75, 73, 69, 0.08);
  --fs-text-secondary-a10: rgba(75, 73, 69, 0.1);
  --fs-text-secondary-a15: rgba(75, 73, 69, 0.15);
  --fs-text-secondary-a25: rgba(75, 73, 69, 0.25);
  --fs-text-secondary-a40: rgba(75, 73, 69, 0.4);
  --fs-warning-a05: rgba(131, 90, 1, 0.05);
  --fs-warning-a13: rgba(131, 90, 1, 0.13);
  --fs-warning-a15: rgba(131, 90, 1, 0.15);
  --fs-warning-a20: rgba(131, 90, 1, 0.2);
  --fs-warning-a30: rgba(131, 90, 1, 0.3);
  --fs-warning-a34: rgba(131, 90, 1, 0.34);
  --fs-warning-a50: rgba(131, 90, 1, 0.5);

  /* ==========================================
     Spacing System (4px base)
     ========================================== */
  --fs-spacing-xs: 4px; /* Extra small spacing */
  --fs-spacing-sm: 8px; /* Small spacing */
  --fs-spacing-md: 12px; /* Medium spacing */
  --fs-spacing-lg: 16px; /* Large spacing */
  --fs-spacing-xl: 20px; /* Extra large spacing */
  --fs-spacing-2xl: 24px; /* 2X large spacing */
  --fs-spacing-3xl: 32px; /* 3X large spacing */
  --fs-spacing-4xl: 48px; /* 4X large spacing */

  /* ==========================================
     Border Radius System
     ========================================== */
  --fs-radius-sm: 12px; /* Small radius - inputs, small buttons */
  --fs-radius-md: 12px; /* Medium radius - cards, containers */
  --fs-radius-lg: 16px; /* Large radius - modals, large containers */
  --fs-radius-xl: 24px; /* Extra large radius */
  --fs-radius-pill: 999px; /* Pill shape - tags, badges */

  /* ==========================================
     Typography Scale
     ========================================== */
  --fs-font-family: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Font Sizes */
  --fs-font-size-xs: 0.75rem; /* 12px - tiny text */
  --fs-font-size-sm: 0.875rem; /* 14px - small text */
  --fs-font-size-base: 1rem; /* 16px - body text */
  --fs-font-size-lg: 1.125rem; /* 18px - large text */
  --fs-font-size-xl: 1.25rem; /* 20px - headings */
  --fs-font-size-2xl: 1.5rem; /* 24px - large headings */
  --fs-font-size-3xl: 1.875rem; /* 30px - hero text */

  /* Font Weights */
  --fs-font-weight-normal: 400;
  --fs-font-weight-medium: 500;
  --fs-font-weight-semibold: 600;
  --fs-font-weight-bold: 700;

  /* Line Heights */
  --fs-line-height-tight: 1.25;
  --fs-line-height-normal: 1.5;
  --fs-line-height-relaxed: 1.75;

  /* ==========================================
     Transitions & Animations
     ========================================== */
  --fs-transition-fast: 150ms ease;
  --fs-transition-base: 200ms ease;
  --fs-transition-slow: 300ms ease;
  --fs-transition-slower: 500ms ease;

  /* Transition Properties */
  --fs-transition-colors:
    background-color var(--fs-transition-base),
    border-color var(--fs-transition-base), color var(--fs-transition-base);
  --fs-transition-transform: transform var(--fs-transition-base);
  --fs-transition-all: all var(--fs-transition-base);

  /* Loading-surface animation durations. The dashboard loaders below reference these — retune a loader's
     speed HERE, not in a component. NOTE: this is the migration target, not yet complete — other loaders
     (spinners, and shimmers in loading-animations.css) still hardcode durations; folding them in is tracked
     in #159. Prefer these tokens for any new loading indicator. (Runtime JS must never override durations
     with `!important` — that caused the 2-day iOS loading-bar bug; see PR #165/#166.) */
  --fs-dur-loading-bar: 3.5s; /* dashboard indeterminate progress bar (ProgressIndicator) */
  --fs-dur-skeleton: 1.5s; /* skeleton shimmer sweep (SkeletonLoader) */
  --fs-dur-loading-fade: 200ms; /* loading-screen fade-in (MealPlanner .loading-container) */
  --fs-dur-meal-combo-bar: 2s; /* meal-combinations loader bar (SimpleMealLoader) */

  /* ==========================================
     Shadows (Elevation System)
     ========================================== */
  --fs-shadow-xs: none;
  --fs-shadow-sm: none;
  --fs-shadow-md: none;
  --fs-shadow-lg: 0 -12px 40px rgba(26, 26, 26, 0.18);
  --fs-shadow-xl: 0 -12px 40px rgba(26, 26, 26, 0.18);

  /* Colored Shadows */
  --fs-shadow-primary: none;
  --fs-shadow-primary-subtle: none;
  --fs-shadow-accent: none;

  /* Focus Rings */
  --fs-focus-ring-primary: 0 0 0 2px var(--fs-border-focus);

  /* ==========================================
     Z-Index Scale
     ========================================== */
  --fs-z-base: 0;
  --fs-z-dropdown: 1000;
  --fs-z-sticky: 1020;
  --fs-z-fixed: 1030;
  --fs-z-modal-backdrop: 1040;
  --fs-z-modal: 1050;
  --fs-z-popover: 1060;
  --fs-z-tooltip: 1070;

  /* ==========================================
     Component-Specific Tokens
     ========================================== */

  /* Input Fields */
  --fs-input-height: 45px;
  --fs-input-height-sm: 36px;
  --fs-input-height-lg: 52px;
  --fs-input-padding-x: var(--fs-spacing-lg);
  --fs-input-padding-y: var(--fs-spacing-md);
  --fs-input-border-width: 1px;
  --fs-input-focus-border-width: 2px;

  /* Buttons */
  --fs-button-padding-x: var(--fs-spacing-xl);
  --fs-button-padding-y: var(--fs-spacing-md);
  --fs-button-padding-x-sm: var(--fs-spacing-md);
  --fs-button-padding-y-sm: var(--fs-spacing-sm);
  --fs-button-padding-x-lg: var(--fs-spacing-2xl);
  --fs-button-padding-y-lg: var(--fs-spacing-lg);

  /* Food Tags */
  --fs-tag-padding-x: var(--fs-spacing-md);
  --fs-tag-padding-y: var(--fs-spacing-sm);
  --fs-tag-font-size: var(--fs-font-size-sm);

  /* Cards */
  --fs-card-padding: var(--fs-spacing-xl);
  --fs-card-padding-sm: var(--fs-spacing-lg);
  --fs-card-border-radius: var(--fs-radius-md);
  --fs-card-shadow: var(--fs-shadow-sm);

  /* Loading States */
  --fs-loading-overlay-bg: rgba(237, 246, 234, 0.9);
  --fs-loading-spinner-size: 40px;

  /* ==========================================
     Breakpoints (for reference in JS)
     ========================================== */
  --fs-breakpoint-xs: 0;
  --fs-breakpoint-sm: 576px;
  --fs-breakpoint-md: 768px;
  --fs-breakpoint-lg: 992px;
  --fs-breakpoint-xl: 1200px;
  --fs-breakpoint-2xl: 1400px;

  /* ==========================================
     Mobile-Specific Tokens
     ========================================== */
  --fs-mobile-tap-target: 48px; /* Minimum touch target size */
  --fs-mobile-tap-target-sm: 44px; /* Smaller touch targets */
  --fs-mobile-input-height: 48px; /* Mobile input height */
  --fs-mobile-bottom-sheet-height: 85vh; /* Bottom sheet max height */
  --fs-mobile-action-bar-height: 64px; /* Fixed bottom bar height */
  --fs-mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  /* ==========================================
     Restyle (#1028 slice 2) — the locked design system
     ========================================== */
  --fs-bg-page: #edf6ea; /* Dew page behind the white blocks */
  /* Bar fills. The day kcal bar is the one Beet fill on data; kcal NUMBERS stay ink. */
  --fs-macro-kcal-fill: var(--fs-primary);
  --fs-macro-protein-fill: var(--fs-macro-protein);
  --fs-macro-carbs-fill: var(--fs-macro-carbs);
  --fs-macro-fat-fill: var(--fs-macro-fat);
  --fs-radius-sheet: 24px;
  --fs-shadow-dialog: 0 12px 40px rgba(26, 26, 26, 0.18); /* Centred dialogs; sheets use the upward --fs-shadow-lg */
  --fs-tap-primary: 52px;

}

/* ==========================================
   Dark Mode Support (Future Enhancement)
   ========================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode tokens can be defined here when needed */
    /* Currently keeping light mode only for consistency */
  }
}

/* ==========================================
   Utility Classes Using Design Tokens
   ========================================== */

/* Text Colors */
.fs-text-primary {
  color: var(--fs-text-primary);
}
.fs-text-secondary {
  color: var(--fs-text-secondary);
}
.fs-text-muted {
  color: var(--fs-text-muted);
}
.fs-text-accent {
  color: var(--fs-accent);
}
.fs-text-primary-color {
  color: var(--fs-primary);
}

/* Background Colors */
.fs-bg-primary {
  background-color: var(--fs-bg-primary);
}
.fs-bg-secondary {
  background-color: var(--fs-bg-secondary);
}
.fs-bg-accent-light {
  background-color: var(--fs-accent-light);
}
.fs-bg-primary-light {
  background-color: var(--fs-primary-light);
}

/* Spacing Utilities */
.fs-p-xs {
  padding: var(--fs-spacing-xs);
}
.fs-p-sm {
  padding: var(--fs-spacing-sm);
}
.fs-p-md {
  padding: var(--fs-spacing-md);
}
.fs-p-lg {
  padding: var(--fs-spacing-lg);
}
.fs-p-xl {
  padding: var(--fs-spacing-xl);
}

.fs-m-xs {
  margin: var(--fs-spacing-xs);
}
.fs-m-sm {
  margin: var(--fs-spacing-sm);
}
.fs-m-md {
  margin: var(--fs-spacing-md);
}
.fs-m-lg {
  margin: var(--fs-spacing-lg);
}
.fs-m-xl {
  margin: var(--fs-spacing-xl);
}

/* Border Radius Utilities */
.fs-rounded-sm {
  border-radius: var(--fs-radius-sm);
}
.fs-rounded-md {
  border-radius: var(--fs-radius-md);
}
.fs-rounded-lg {
  border-radius: var(--fs-radius-lg);
}
.fs-rounded-pill {
  border-radius: var(--fs-radius-pill);
}

/* Shadow Utilities */
.fs-shadow-sm {
  box-shadow: var(--fs-shadow-sm);
}
.fs-shadow-md {
  box-shadow: var(--fs-shadow-md);
}
.fs-shadow-lg {
  box-shadow: var(--fs-shadow-lg);
}

/* Transition Utilities */
.fs-transition-colors {
  transition: var(--fs-transition-colors);
}
.fs-transition-transform {
  transition: var(--fs-transition-transform);
}
.fs-transition-all {
  transition: var(--fs-transition-all);
}