/* MyDaily tokens — generated from the MyDaily Design System (tokens/*.css). Do not edit by hand; update the DS and regenerate. */

/* ===== tokens/colors.css ===== */
/* MyDaily colour system.
   Base palette = raw values (never theme-dependent).
   Semantic tokens = what components read; they change per area via [data-theme].
   Nutrition/Shopping is the default (:root). Style/Wardrobe is [data-theme="style"]. */

:root {
  /* — Warm palette (Nutrition / Shopping) — values from mydaily-frontend/styles.css */
  --cream-50: #FFFDF8;
  --cream-100: #FBF6EF;
  --cream-200: #F2EAE0;
  --cream-300: #EAE1D2;
  --sand-400: #C9BFAE;
  --taupe-600: #8A8175;
  --taupe-700: #6F665B;
  --cocoa-900: #2E2A24;
  --peach-100: #FBE8D2;
  --peach-300: #F5D9B0;
  --blush-200: #F8DDD9;
  --blush-300: #F3C9C4;
  --blush-600: #C97C74;
  --blush-700: #A85F57;
  --mint-100: #E9F1EA;
  --mint-300: #C3E3D6;
  --mint-700: #3F8F6E;
  --coral-100: #F6DAD5;
  --coral-500: #D9756B;

  /* — Cool palette (Style / Wardrobe) — */
  --mist-50: #F7F8FA;
  --mist-100: #EEF1F4;
  --mist-200: #E3E7EC;
  --mist-300: #D3D9E0;
  --slate-400: #A7B1BD;
  --slate-500: #7D8A99;
  --slate-600: #5D6A7A;
  --slate-700: #46525F;
  --slate-900: #1E252E;
  --steel-100: #DCE5EF;
  --steel-300: #BCC8D6;
  --steel-500: #6E83A0;
  --steel-700: #4A5D78;
  --sage-200: #D6E4DD;
  --sage-700: #46705E;
  --flax-200: #ECE1CF;
  --rosewood-200: #ECD8D6;
  --rosewood-600: #A4544C;

  --white: #FFFFFF;
}

/* Registered so the theme switch interpolates instead of snapping. */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #F2EAE0; }
@property --bg-glow-a { syntax: '<color>'; inherits: true; initial-value: #FBE8D2; }
@property --bg-glow-b { syntax: '<color>'; inherits: true; initial-value: #E9F1EA; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: rgba(255,253,248,.62); }
@property --surface-solid { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --surface-sunken { syntax: '<color>'; inherits: true; initial-value: #FBF6EF; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #2E2A24; }
@property --ink-soft { syntax: '<color>'; inherits: true; initial-value: #6F665B; }
@property --ink-muted { syntax: '<color>'; inherits: true; initial-value: #8A8175; }
@property --ink-disabled { syntax: '<color>'; inherits: true; initial-value: #C9BFAE; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #EAE1D2; }
@property --line-soft { syntax: '<color>'; inherits: true; initial-value: rgba(150,122,84,.14); }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #F3C9C4; }
@property --accent-strong { syntax: '<color>'; inherits: true; initial-value: #C97C74; }
@property --accent-soft { syntax: '<color>'; inherits: true; initial-value: #F8DDD9; }
@property --on-accent { syntax: '<color>'; inherits: true; initial-value: #2E2A24; }
@property --accent-2 { syntax: '<color>'; inherits: true; initial-value: #C3E3D6; }
@property --underline { syntax: '<color>'; inherits: true; initial-value: #F3C9C4; }
@property --deco-a { syntax: '<color>'; inherits: true; initial-value: #F5D9B0; }
@property --deco-b { syntax: '<color>'; inherits: true; initial-value: #C3E3D6; }
@property --deco-c { syntax: '<color>'; inherits: true; initial-value: #F3C9C4; }
@property --selected-bg { syntax: '<color>'; inherits: true; initial-value: #F3C9C4; }
@property --shadow-tint { syntax: '<color>'; inherits: true; initial-value: rgba(150,122,84,.20); }
@property --shadow-light { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.85); }

/* — Semantic: Nutrition / Shopping (default) — */
:root {
  --bg: var(--cream-200);
  --bg-glow-a: var(--peach-100);
  --bg-glow-b: var(--mint-100);
  --surface: rgba(255, 253, 248, .62);
  --surface-solid: var(--white);
  --surface-sunken: var(--cream-100);
  --ink: var(--cocoa-900);
  --ink-soft: var(--taupe-700);
  --ink-muted: var(--taupe-600);
  --ink-disabled: var(--sand-400);
  --line: var(--cream-300);
  --line-soft: rgba(150, 122, 84, .14);
  --accent: var(--blush-300);
  --accent-strong: var(--blush-600);
  --accent-soft: var(--blush-200);
  --on-accent: var(--cocoa-900);
  --accent-2: var(--mint-300);
  --underline: var(--blush-300);
  --deco-a: var(--peach-300);
  --deco-b: var(--mint-300);
  --deco-c: var(--blush-300);
  --shadow-tint: rgba(150, 122, 84, .20);
  --shadow-light: rgba(255, 255, 255, .85);
  --selected-bg: var(--blush-300);
  --selected-decoration: none; /* @kind other */

  --success: var(--mint-700);
  --success-soft: var(--mint-300);
  --warning-soft: var(--peach-300);
  --danger: var(--coral-500);
  --danger-soft: var(--coral-100);

  /* Legacy aliases — same names as mydaily-frontend/styles.css */
  --pink: var(--blush-300);
  --pink-dark: var(--blush-600);
  --peach: var(--peach-300);
  --mint: var(--mint-300);
  --border: var(--cream-300);
}

/* — Semantic: Style / Wardrobe — cooler, flatter, editorial — */
[data-theme="style"] {
  --bg: var(--mist-200);
  --bg-glow-a: var(--steel-100);
  --bg-glow-b: var(--mist-50);
  --surface: rgba(247, 248, 250, .72);
  --surface-solid: var(--mist-50);
  --surface-sunken: var(--mist-100);
  --ink: var(--slate-900);
  --ink-soft: var(--slate-600);
  --ink-muted: var(--slate-500);
  --ink-disabled: var(--slate-400);
  --line: var(--mist-300);
  --line-soft: rgba(30, 37, 46, .10);
  --accent: var(--slate-900);
  --accent-strong: var(--steel-700);
  --accent-soft: var(--steel-100);
  --on-accent: var(--mist-50);
  --accent-2: var(--steel-300);
  --underline: var(--slate-900);
  --deco-a: var(--steel-300);
  --deco-b: var(--mist-50);
  --deco-c: var(--slate-400);
  --shadow-tint: rgba(46, 58, 74, .10);
  --shadow-light: rgba(255, 255, 255, .70);
  --selected-bg: var(--mist-50);
  --selected-decoration: underline; /* @kind other */

  --success: var(--sage-700);
  --success-soft: var(--sage-200);
  --warning-soft: var(--flax-200);
  --danger: var(--rosewood-600);
  --danger-soft: var(--rosewood-200);
}

/* ===== tokens/typography.css ===== */
/* Typography — Fraunces (display serif) + Manrope (UI sans), as in production.
   Mobile sizes are slightly larger than the desktop source (body 14 → 15, inputs 16 to stop iOS zoom). */
:root {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-title-xl: 28px;   /* recipe title */
  --fs-title-l: 24px;    /* wizard step / page title */
  --fs-title-m: 22px;    /* section page heading, logo */
  --fs-title-s: 17px;    /* in-card heading ("Состав") */
  --fs-stat-xl: 34px;    /* family counter */
  --fs-stat: 20px;       /* kcal stat */
  --fs-body-l: 16px;     /* inputs, list items on mobile */
  --fs-body: 15px;
  --fs-body-s: 14px;
  --fs-label: 13px;
  --fs-caption: 12px;
  --fs-micro: 11px;

  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-heavy: 800; /* @kind font */

  --lh-tight: 1.15; /* @kind font */
  --lh-snug: 1.3; /* @kind font */
  --lh-body: 1.5; /* @kind font */

  --tracking-tight: -0.01em; /* @kind font */
  --tracking-normal: 0; /* @kind font */
  --tracking-caps: 0.06em; /* @kind font */
  --tracking-caps-wide: 0.14em; /* @kind font */

  /* Theme-dependent type character */
  --heading-weight: 700; /* @kind font */
  --heading-tracking: -0.01em; /* @kind font */
  --eyebrow-tracking: var(--tracking-caps); /* @kind font */
  --eyebrow-weight: 700; /* @kind font */
}
[data-theme="style"] {
  --heading-weight: 500; /* @kind font */
  --heading-tracking: -0.015em; /* @kind font */
  --eyebrow-tracking: var(--tracking-caps-wide); /* @kind font */
  --eyebrow-weight: 600; /* @kind font */
}

/* ===== tokens/spacing.css ===== */
/* Spacing, radii, layout. Values lifted from the production stylesheet
   (gaps 6/8/10/12/14/16/18/22, radii 8/12/14/16/18/20/24/999). */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 22px;
  --space-11: 24px;
  --space-12: 28px;
  --space-13: 32px;
  --space-14: 36px;
  --space-15: 40px;

  --radius-xs: 8px;      /* checkbox */
  --radius-sm: 12px;     /* input, pill, image placeholder */
  --radius-md: 14px;     /* nutrient tile, textarea */
  --radius-lg: 16px;     /* choice card, meal card */
  --radius-xl: 18px;     /* item card */
  --radius-2xl: 20px;    /* hero image */
  --radius-3xl: 24px;    /* glass card */
  --radius-full: 999px;

  /* Theme-dependent radii: Style tightens corners */
  --radius-card: var(--radius-3xl);
  --radius-tile: var(--radius-lg);
  --radius-control: var(--radius-sm);
  --radius-button: var(--radius-full);

  /* Layout */
  --page-gutter: 20px;
  --page-max: 640px;
  --page-max-wide: 1080px;
  --touch-min: 44px;
  --header-h: 56px;
  --bottom-nav-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --z-base: 1; /* @kind other */
  --z-raised: 2; /* @kind other */
  --z-sticky: 20; /* @kind other */
  --z-nav: 30; /* @kind other */
  --z-overlay: 50; /* @kind other */
}
[data-theme="style"] {
  --radius-card: var(--radius-lg);
  --radius-tile: var(--radius-sm);
  --radius-control: 10px;
  --radius-button: var(--radius-full);
}

/* ===== tokens/effects.css ===== */
/* Shadows, blur, motion.
   Nutrition = soft neumorphic double shadows (light top-left, warm bottom-right) — from production.
   Style = flat: hairline borders + a whisper of shadow. */
:root {
  --shadow-card: 12px 12px 26px rgba(150, 122, 84, .20), -10px -10px 20px rgba(255, 255, 255, .85);
  --shadow-raised: 6px 6px 14px rgba(150, 122, 84, .16), -5px -5px 11px rgba(255, 255, 255, .8);
  --shadow-raised-hover: 8px 8px 18px rgba(150, 122, 84, .22), -6px -6px 14px rgba(255, 255, 255, .9);
  --shadow-small: 3px 3px 7px rgba(150, 122, 84, .18), -2px -2px 5px rgba(255, 255, 255, .8);
  --shadow-pressed: inset 3px 3px 8px rgba(150, 80, 70, .22), inset -3px -3px 7px rgba(255, 255, 255, .45);
  --shadow-pressed-danger: inset 3px 3px 8px rgba(90, 30, 20, .30), inset -3px -3px 7px rgba(255, 255, 255, .2);
  --shadow-inset: inset 3px 3px 7px rgba(150, 122, 84, .14), inset -2px -2px 5px rgba(255, 255, 255, .9);
  --shadow-inset-sm: inset 2px 2px 5px rgba(150, 122, 84, .16), inset -1px -1px 3px rgba(255, 255, 255, .9);
  --shadow-nav: 0 -1px 0 rgba(150, 122, 84, .10), 0 -8px 24px rgba(150, 122, 84, .12);

  --card-border: 1px solid rgba(255, 255, 255, .55); /* @kind other */
  --control-border: 1px solid transparent; /* @kind other */

  --blur-card: 14px; /* @kind other */
  --blur-raised: 8px; /* @kind other */
  --blur-nav: 18px; /* @kind other */

  --dur-instant: 90ms; /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-theme: 220ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
  --ease-standard: cubic-bezier(.2, .7, .2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(.45, 0, .25, 1); /* @kind other */
  --ease-spring: cubic-bezier(.3, 1.3, .5, 1); /* @kind other */

  --press-scale: .97; /* @kind other */
  --blob-opacity: .45; /* @kind other */
  --header-deco-opacity: 0; /* @kind other */
}
[data-theme="style"] {
  --shadow-card: 0 1px 2px rgba(30, 37, 46, .06), 0 10px 28px rgba(46, 58, 74, .08);
  --shadow-raised: 0 1px 2px rgba(30, 37, 46, .06);
  --shadow-raised-hover: 0 2px 6px rgba(30, 37, 46, .10);
  --shadow-small: 0 1px 2px rgba(30, 37, 46, .08);
  --shadow-pressed: inset 0 0 0 1px var(--slate-900);
  --shadow-pressed-danger: inset 0 0 0 1px var(--rosewood-600);
  --shadow-inset: inset 0 0 0 1px var(--mist-300);
  --shadow-inset-sm: inset 0 0 0 1px var(--slate-400);
  --shadow-nav: 0 -1px 0 var(--mist-300);

  --card-border: 1px solid var(--mist-300); /* @kind other */
  --control-border: 1px solid var(--mist-300); /* @kind other */
  --blob-opacity: .55; /* @kind other */
  --header-deco-opacity: 1; /* @kind other */
}

/* ===== tokens/base.css ===== */
/* Base element styles + the theme morph. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Any element carrying data-theme morphs its colour tokens in ~220ms. */
:root, [data-theme] {
  transition:
    --bg var(--dur-theme) var(--ease-in-out),
    --bg-glow-a var(--dur-theme) var(--ease-in-out),
    --bg-glow-b var(--dur-theme) var(--ease-in-out),
    --surface var(--dur-theme) var(--ease-in-out),
    --surface-solid var(--dur-theme) var(--ease-in-out),
    --surface-sunken var(--dur-theme) var(--ease-in-out),
    --ink var(--dur-theme) var(--ease-in-out),
    --ink-soft var(--dur-theme) var(--ease-in-out),
    --ink-muted var(--dur-theme) var(--ease-in-out),
    --line var(--dur-theme) var(--ease-in-out),
    --line-soft var(--dur-theme) var(--ease-in-out),
    --accent var(--dur-theme) var(--ease-in-out),
    --accent-strong var(--dur-theme) var(--ease-in-out),
    --accent-soft var(--dur-theme) var(--ease-in-out),
    --on-accent var(--dur-theme) var(--ease-in-out),
    --accent-2 var(--dur-theme) var(--ease-in-out),
    --underline var(--dur-theme) var(--ease-in-out),
    --deco-a var(--dur-theme) var(--ease-in-out),
    --deco-b var(--dur-theme) var(--ease-in-out),
    --deco-c var(--dur-theme) var(--ease-in-out);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent-strong); text-decoration: none; }
a:hover { color: var(--ink); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
input, select, textarea { font-family: inherit; font-size: var(--fs-body-l); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  :root, [data-theme] { transition: none; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}