/* SmartKitch shared brand layer (Phase 2). Loaded after each page's own CSS.
   Tokens from studio/BRAND.md; fonts for all five app languages; native-shell
   (Capacitor) adjustments keyed on html.sk-native from platform.js. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600&family=Noto+Kufi+Arabic:wght@700&family=Noto+Nastaliq+Urdu:wght@400;600&family=Noto+Sans+Devanagari:wght@400;600&family=Noto+Sans+Ethiopic:wght@400;600&display=swap');

:root {
  --sk-sage-deep: #3E4A38; --sk-sage: #5F7355; --sk-cream: #F1EDE3; --sk-card: #FAF8F2;
  --sk-gold: #C59B4B; --sk-mint: #DFF5E1; --sk-ink: #1E1B16; --sk-terracotta: #B3402E;
  --sk-ease: cubic-bezier(.22,.8,.3,1);
  /* the app's own variables now resolve to the brand values */
  --gold: var(--sk-gold); --sage: var(--sk-sage); --paper: var(--sk-cream); --card: var(--sk-card); --ink: var(--sk-ink);
}

/* Language-aware body and display faces. The page keeps its own --font-body
   for Latin; Arabic, Urdu, Hindi and Amharic get a proper face each. */
html[lang="ar"] body { font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
html[lang="ur"] body { font-family: "Noto Nastaliq Urdu", "Segoe UI", sans-serif; line-height: 1.9; }
html[lang="hi"] body { font-family: "Noto Sans Devanagari", "Segoe UI", sans-serif; }
html[lang="am"] body { font-family: "Noto Sans Ethiopic", "Segoe UI", sans-serif; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif; letter-spacing: 0; line-height: 1.3; }
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3, html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="am"] h1, html[lang="am"] h2, html[lang="am"] h3 { font-family: inherit; letter-spacing: 0; line-height: 1.4; }

/* Arabic, Urdu, Hindi and Amharic never render in the monospace label face */
html[lang="ar"] .eyebrow, html[lang="ar"] .section-label, html[lang="ar"] .mono, html[lang="ar"] .helper, html[lang="ar"] .hint, html[lang="ar"] .welcome p, html[lang="ar"] .auth-sub, html[lang="ar"] .tagline, html[lang="ar"] .hh-sub, html[lang="ar"] small { font-family: "IBM Plex Sans Arabic", "Segoe UI", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; }
html[lang="ur"] .eyebrow, html[lang="ur"] .section-label, html[lang="ur"] .mono, html[lang="ur"] .helper, html[lang="hi"] .eyebrow, html[lang="hi"] .section-label, html[lang="hi"] .mono, html[lang="am"] .eyebrow, html[lang="am"] .section-label, html[lang="am"] .mono { font-family: inherit !important; letter-spacing: 0 !important; text-transform: none !important; }

/* Accessibility floor: readable sizes, visible focus, generous tap targets */
button, .settings-item, .bnav-btn, .tab-btn { min-height: 44px; }
:focus-visible { outline: 3px solid var(--sk-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Native shell (Capacitor): safe areas, no price or plan words (Apple), no
   install prompts, native-feeling sheets. Everything in .pricing-ui is hidden
   in the iOS build and stays visible on the web. */
html.sk-native .pricing-ui, html.sk-native .pwa-install, html.sk-native .install-hint, html.sk-native [data-tour="install"] { display: none !important; }
html.sk-native header, html.sk-native .app-header { padding-top: calc(env(safe-area-inset-top) + 8px); }
html.sk-native #bottom-nav { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
html.sk-native .modal, html.sk-native .sheet { border-radius: 22px 22px 0 0; top: auto; bottom: 0; max-height: 88vh; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
html.sk-native * { -webkit-tap-highlight-color: transparent; }
html.sk-native body { overscroll-behavior-y: none; }

/* The kitchen ticket: cream card with the gold top stitch, the same mark as
   the apron. One accent per card. */
.sk-ticket { background: var(--sk-card); border-radius: 18px; border: 1px solid rgba(30,27,22,.1); position: relative; }
.sk-ticket::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: repeating-linear-gradient(90deg, var(--sk-gold) 0 10px, transparent 10px 16px); }

/* Owner console on a phone: the household table becomes cards */
@media (max-width: 760px) {
  .sk-cards table, .sk-cards thead, .sk-cards tbody, .sk-cards tr, .sk-cards td { display: block; }
  .sk-cards thead { display: none; }
  .sk-cards tr { background: var(--sk-card); border: 1px solid rgba(30,27,22,.12); border-radius: 16px; padding: 10px 14px; margin: 0 0 12px; }
  .sk-cards td { border: 0 !important; padding: 5px 0 !important; display: flex; justify-content: space-between; gap: 12px; text-align: end; }
  .sk-cards td::before { content: attr(data-label); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; text-align: start; }
  .sk-cards td:first-child { font-weight: 700; font-size: 1rem; }
  .sk-cards td:first-child::before { content: none; }
  .sk-cards td.actions { justify-content: flex-start; flex-wrap: wrap; }
  .sk-cards td.actions::before { content: none; }
}