/* cookAIfood design system v1 - tokens and components (see DESIGN_PLAN.md).
   Loaded AFTER custom.css. New components are prefixed ck-; the few overrides at the bottom are accessibility fixes.
   Palette decided 2026-10-02: split green (dark for text, brand for fills), burgundy only for drink pairing. */

:root {
  /* brand */
  --brand-50: #F1F7F2;
  --brand-100: #DDEBDF;
  --brand-500: #5E9A64;   /* fills, buttons, large headings */
  --brand-600: #3E7A45;   /* text and icons on light backgrounds (AA) */
  --brand-900: #234426;   /* headings on green tints */
  /* ink and lines */
  --ink-900: #0F172A;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-400: #94A3B8;
  --line: #E2E8F0;
  --line-strong: #CBD5E1;
  /* accents */
  --wine-700: #800020;
  --wine-900: #5C0017;
  --wine-50: #FBF3F5;
  --wine-line: #EBCBD3;
  --cream-50: #FFF8E8;
  --cream-line: #F0DDAA;
  --amber-700: #6B4400;
  --amber-500: #B7791F;
  --slate-50: #F1F5F9;
  --slate-line: #D5DEE8;
  /* status */
  --danger-600: #B42318;
  --danger-50: #FEF3F2;
  --success-600: #2E7D32;
  --success-50: #EEF7EE;
  --info-600: #1D4ED8;
  --info-50: #EFF4FF;
  /* type scale (Poppins) */
  --text-display: 2.25rem;
  --text-h1: 1.75rem;
  --text-h2: 1.375rem;
  --text-h3: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-min: 0.8125rem;
  /* space, shape, elevation */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-float: 0 6px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.08);
  --focus-ring: 0 0 0 3px rgba(94, 154, 100, 0.45);
  --tap: 44px;
}

/* ---------- typography helpers ---------- */
.ck-h1 { font-size: var(--text-h1); font-weight: 600; line-height: 1.2; color: var(--ink-900); }
.ck-h2 { font-size: var(--text-h2); font-weight: 600; line-height: 1.25; color: var(--ink-900); }
.ck-h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.3; color: var(--ink-900); }
.ck-muted { color: var(--ink-600); }
.ck-small { font-size: var(--text-small); }
@media (max-width: 575.98px) {
  :root { --text-display: 1.75rem; --text-h1: 1.5rem; --text-h2: 1.25rem; }
}

/* ---------- skip link ---------- */
.ck-skip { position: absolute; left: 8px; top: -60px; z-index: 3000; background: var(--brand-900); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 500; text-decoration: none; }
.ck-skip:focus { top: 8px; color: #fff; }

/* ---------- buttons ---------- */
.ck-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 10px 20px; border: 1px solid transparent; border-radius: var(--radius-sm); font-family: inherit; font-size: var(--text-body); font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.ck-btn:hover { text-decoration: none; }
.ck-btn--primary { background: var(--brand-600); color: #fff; }
.ck-btn--primary:hover, .ck-btn--primary:focus { background: var(--brand-900); color: #fff; }
.ck-btn--secondary { background: #fff; color: var(--brand-600); border-color: var(--brand-600); }
.ck-btn--secondary:hover { background: var(--brand-50); color: var(--brand-900); }
.ck-btn--ghost { background: transparent; color: var(--ink-700); }
.ck-btn--ghost:hover { background: var(--slate-50); }
.ck-btn--danger { background: var(--danger-600); color: #fff; }
.ck-btn--danger:hover { background: #8A1A10; color: #fff; }
.ck-btn--sm { min-height: 36px; padding: 6px 14px; font-size: var(--text-small); }
.ck-btn--block { display: flex; width: 100%; }
.ck-btn[disabled], .ck-btn.disabled { opacity: .55; cursor: not-allowed; }

/* ---------- cards ---------- */
.ck-card { background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.ck-card__title { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-3); font-size: var(--text-h3); font-weight: 600; line-height: 1.3; color: var(--ink-900); }
.ck-card__title i { color: var(--brand-600); }
.ck-card--green { background: var(--brand-50); border-color: #D5E5D7; }
.ck-card--green .ck-card__title { color: var(--brand-900); }
.ck-card--wine { background: var(--wine-50); border-color: var(--wine-line); }
.ck-card--wine .ck-card__title, .ck-card--wine .ck-card__title i { color: var(--wine-900); }
.ck-card--cream { background: var(--cream-50); border-color: var(--cream-line); color: var(--amber-700); }
.ck-card--cream .ck-card__title, .ck-card--cream .ck-card__title i { color: var(--amber-700); }
.ck-card--slate { background: var(--slate-50); border-color: var(--slate-line); }
.ck-card--flat { border: 0; box-shadow: none; }
.ck-card--float { box-shadow: var(--shadow-float); border-color: transparent; }

/* ---------- pills and stat tiles ---------- */
.ck-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-100); color: var(--brand-900); border-radius: var(--radius-pill); padding: 3px 12px; font-size: var(--text-min); font-weight: 500; }
.ck-pill--wine { background: var(--wine-50); color: var(--wine-900); }
.ck-stat { background: var(--brand-50); border-radius: var(--radius-md); padding: 10px 8px; text-align: center; }
.ck-stat__value { display: block; font-size: var(--text-h3); font-weight: 600; color: var(--brand-900); line-height: 1.2; }
.ck-stat__label { display: block; font-size: var(--text-min); color: var(--brand-600); }

/* ---------- forms ---------- */
.ck-label { display: block; margin-bottom: 6px; font-size: var(--text-small); font-weight: 500; color: var(--ink-700); }
.ck-input { border-radius: var(--radius-sm) !important; display: block; width: 100%; min-height: var(--tap); padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink-900); font-family: inherit; font-size: var(--text-body); line-height: 1.4; }
.ck-input:focus { outline: 0; border-color: var(--brand-600); box-shadow: var(--focus-ring); }
.ck-input.is-invalid { border-color: var(--danger-600); }
.ck-help { margin-top: 4px; font-size: var(--text-small); color: var(--ink-600); }
.ck-field { margin-bottom: var(--space-4); position: relative; }
.ck-field__toggle { position: absolute; right: 2px; bottom: 0; min-height: var(--tap); min-width: var(--tap); background: transparent; border: 0; color: var(--brand-600); font-weight: 500; font-size: var(--text-small); cursor: pointer; border-radius: var(--radius-sm); }

/* ---------- alerts ---------- */
.ck-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid; font-size: var(--text-small); line-height: 1.5; margin-bottom: var(--space-4); }
.ck-alert--danger { background: var(--danger-50); border-color: #F5C0BB; color: #7A1B12; }
.ck-alert--success { background: var(--success-50); border-color: #BFE0C2; color: #1B5E20; }
.ck-alert--info { background: var(--info-50); border-color: #C3D4FB; color: #1E3A8A; }

/* ---------- accordion (native details/summary, no JavaScript) ---------- */
.ck-accordion { border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: #fff; overflow: hidden; }
.ck-accordion details { border-top: 1px solid var(--line); }
.ck-accordion details:first-child { border-top: 0; }
.ck-accordion summary { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 10px 16px; cursor: pointer; font-weight: 500; color: var(--ink-900); list-style: none; }
.ck-accordion summary::-webkit-details-marker { display: none; }
.ck-accordion summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto; font-size: .75rem; color: var(--ink-600); transition: transform .15s; }
.ck-accordion details[open] summary::after { transform: rotate(180deg); }
.ck-accordion .ck-accordion__body { padding: 0 16px 14px; color: var(--ink-700); line-height: 1.6; }

/* ---------- auth pages (pilot of the new system: login, register, reset) ---------- */
.ck-auth-brand { text-align: center; margin-bottom: var(--space-5); }
.ck-auth-card { background: #fff; border-radius: var(--radius-md); padding: var(--space-6) var(--space-5); box-shadow: var(--shadow-float); }
@media (min-width: 768px) { .ck-auth-card { padding: var(--space-6) 48px; } }
.ck-auth-links { margin-top: var(--space-5); font-size: var(--text-small); color: var(--ink-600); }
.ck-auth-links a { display: inline-block; padding: 12px 4px; min-height: var(--tap); font-weight: 600; color: var(--brand-600); text-transform: none; }

/* ---------- accessibility fixes applied site-wide ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(94, 154, 100, 0.6);
  outline-offset: 2px;
}
@media (pointer: coarse) {
  .footer-link { display: inline-block; padding: 12px 0; min-height: var(--tap); }
  footer .list-unstyled li { margin-bottom: 0; }
  .navbar .nav-link { padding-top: 12px; padding-bottom: 12px; }
  .btn:not(.btn-xs):not(.btn-sm) { min-height: var(--tap); }
  .btn-sm { min-height: var(--tap); min-width: var(--tap); }
  .navbar-toggler { min-height: var(--tap); min-width: var(--tap); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}