/*
 * Console kit: the NourishGenie Console's font, root size, colours and size tokens, shared by the release page
 * (production-release/worker/public/) and the status page (status-page/worker/public/). This file is the source; the
 * two copies next to each Worker's app.css are written by shared/console-kit/sync.sh and each package's tests fail
 * when a copy differs. Linked before app.css. No inline styles anywhere (CSP style-src 'self').
 *
 * Sizes: the Console renders at 80 % (UI_SCALE 0.8, root 14px x 0.8 = 11.2px). A Console value written in rem is
 * copied as rem (same root); a Console px value is written x 0.8. Reference: Microservices
 * .claude/local/plans/console-sizing/GROUND-TRUTH-NOV7.md section A (rendered px in the comments below).
 *
 * Theme: <html data-theme="light|dark|system">. Without the attribute, or with "system", the page follows the
 * operating system (the release page); the status page starts light and keeps the visitor's choice.
 */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/inter-latin-wght-normal.woff2) format('woff2');
}

/* ---- root size ------------------------------------------------------------------------------------------------------
 * The one rule that sizes the page: 14px x 0.8 = 11.2px on desktop and 13px x 0.8 = 10.4px below the Console's scaled
 * lg breakpoint (991.98px x 0.8 = 793.58px).
 */
html {
  font-size: 11.2px;
}

@media (max-width: 793.58px) {
  html {
    font-size: 10.4px;
  }
}

/* ---- tokens ------------------------------------------------------------------------------------------------------ */

:root {
  --primary: #f47b0a;
  --primary-active: #d96a05;
  --primary-light: #fef1e5;
  --primary-clarity: rgba(244, 123, 10, 0.2);
  --primary-inverse: #ffffff;

  --page: #f3f4f6;
  --surface: #ffffff;
  --header: #ffffff;
  --gray-100: #f9f9f9;
  --gray-200: #f1f1f4;
  --gray-300: #dbdfe9;
  --gray-400: #c4cada;
  --gray-500: #99a1b7;
  /* Text that must still be read (help, subtitles, notes, table headers, placeholders): 4.5:1 or more. */
  --text-quiet: #4b5675;
  --gray-600: #78829d;
  --gray-700: #4b5675;
  --gray-800: #252f4a;
  --gray-900: #071437;
  --light: #f1f1f4;
  --light-active: #dbdfe9;
  --border: #f1f1f4;
  --border-strong: #dbdfe9;

  --success: #17c653;
  --success-light: #dfffea;
  --success-text: #0a7f35;
  --warning: #f6c000;
  --warning-light: #fff8dd;
  --warning-text: #7a5b00;
  --danger: #f8285a;
  --danger-light: #ffeef3;
  --danger-text: #d81a48;
  --info: #7239ea;
  --info-light: #f8f5ff;
  --info-text: #5014d0;

  --surface-shadow: 0 0.8px 1.6px rgba(16, 24, 40, 0.04);
  --header-shadow: 0 3.2px 9.6px 0 rgba(0, 0, 0, 0.05);
  --auth-shadow: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
  --bar-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
  --dropdown-shadow: 0 0 40px 0 rgba(82, 63, 105, 0.15);
  --segment-track: #f1f1f4;
  --segment-thumb: #ffffff;
  --segment-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.06);
  --auth-bg: url(/auth-bg.jpg);

  /* Console control scale ($ng-* tokens) */
  --control-h: calc(2.525rem + 1.6px); /* 29.9 */
  --control-font: 0.95rem; /* 10.64 */
  --control-py: 0.55rem;
  --control-px: 0.75rem;
  --control-btn-px: 1rem;
  --compact-h: calc(2rem + 1.6px); /* 24 */
  --compact-font: 0.9rem;
  --compact-px: 0.6rem;
  --compact-btn-px: 0.75rem;
  --mini: 1.75rem;
  --control-radius: 0.425rem; /* 4.76 */
  --check: 1.4rem;
  --glyph-text: 1.25rem;
  --glyph-text-compact: 1rem;
  --glyph-adornment: 1.25rem;
  --glyph-icon: 1.35rem;
  --glyph-icon-compact: 1.15rem;
  --glyph-mini: 0.95rem;

  /* Type roles (rule 6.7) */
  --fs-2x: 2rem; /* 22.4 sign-in heading */
  --fs-2: 1.5rem; /* 16.8 card headline number */
  --fs-3: 1.35rem; /* 15.12 page title */
  --fs-4: 1.25rem; /* 14 hero word, word in a number slot */
  --fs-5: 1.15rem; /* 12.88 card title */
  --fs-6: 1.075rem; /* 12.04 body, table */
  --fs-7: 0.95rem; /* 10.64 secondary line, table header */
  --fs-8: 0.85rem; /* 9.52 small note, fact label, badge */
  --fs-label: 0.8rem; /* 8.96 section label above a card row */
  --fs-tick: 0.75rem; /* 8.4 chart axis tick */

  /* Lines: 1px x 0.8, one device pixel as in the Console */
  --line: 0.8px;

  /* Metronic and Console layout */
  --radius: 0.475rem; /* 5.32 tiles */
  --radius-lg: 0.75rem; /* 8.4 cards */
  --card-pad: 1.5rem; /* 16.8 overview card, hero */
  --card-px: 2.25rem;
  --card-py: 2rem;
  --card-header-h: 5rem;
  --cell-p: 0.75rem; /* 8.4 */
  /* Console list page (CrudListPage, CrudTable, CardHeading, _card-gap.scss), in rem at the same root. */
  --card-gap: 1.5rem; /* 16.8 g-card, mb-card */
  --card-head-pt: 1.5rem; /* .card-heading padding-top */
  --card-head-pb: 1.25rem; /* .card-heading padding-bottom */
  --card-title-font: 1.25rem; /* .card-heading-title */
  --card-body-pt: 1rem; /* CrudTable body pt-4 */
  --card-body-pb: 2rem; /* CrudTable body pb-8 */
  --cell-py: 1.25rem; /* 14 table gy-5 */
  --row-font: 1.075rem; /* table fs-6 */
  --head-font: 0.95rem; /* thead fs-7 fw-bolder text-gray-600 */
  --badge-font: 0.85rem; /* $badge-font-size */
  --badge-py: 0.325rem;
  --badge-px: 0.5rem;
  --badge-h: 1.75rem; /* $badge-size */
  --chip-h: 1.5714rem; /* 17.6 badge-chip: 22px x 0.8 */
  --chip-px: 0.6rem; /* 6.72 */
  --chip-radius: 0.2857rem; /* 3.2 */
  --tile-sm: 2.5rem; /* 28 ToneTile sm */
  --tile-md: 3.2143rem; /* 36 ToneTile md */
  --dot: 0.7143rem; /* 8 StatusDot */
  --bar-h: 2.75rem; /* 30.8 run bars */
  --bar-gap: 1.6px; /* 2px x 0.8 */
  --bar-radius: 2.4px; /* 3px x 0.8 */
  --chart-spark: 4.5714rem; /* 51.2: 64px x 0.8 */
  --chart-card: 8.5714rem; /* 96: 120px x 0.8 */
  --header-h: 5.2857rem; /* 59.2 */
  --gutter: 2.1429rem; /* 24: 30px x 0.8 */

  --sans: 'Inter Variable', Inter, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

/* ---- dark theme: the same block twice (chosen, and following the system) ---------------------------------------- */

:root[data-theme='dark'] {
  --primary-active: #ff8b2b;
  --primary-light: #2b1e12;

  --page: #0f1014;
  --surface: #15171c;
  --header: #0d0e12;
  --gray-100: #1b1c22;
  --gray-200: #26272f;
  --gray-300: #363843;
  --gray-400: #464852;
  --gray-500: #636674;
  --text-quiet: #9a9cae;
  --gray-600: #808290;
  --gray-700: #9a9cae;
  --gray-800: #b5b7c8;
  --gray-900: #f5f5f5;
  --light: #26272f;
  --light-active: #363843;
  --border: #26272f;
  --border-strong: #363843;

  --success: #00a261;
  --success-light: #1f212a;
  --success-text: #01bf73;
  --warning: #c59a00;
  --warning-light: #242320;
  --warning-text: #d9aa00;
  --danger: #e42855;
  --danger-light: #302024;
  --danger-text: #ff3767;
  --info: #883fff;
  --info-light: #272134;
  --info-text: #9e63ff;

  --surface-shadow: none;
  --header-shadow: none;
  --auth-shadow: none;
  --bar-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.4);
  --dropdown-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  --segment-track: #1b1c22;
  --segment-thumb: #363843;
  --segment-shadow: none;
  --auth-bg: url(/auth-bg-dark.jpg);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='dark']) {
    --primary-active: #ff8b2b;
    --primary-light: #2b1e12;

    --page: #0f1014;
    --surface: #15171c;
    --header: #0d0e12;
    --gray-100: #1b1c22;
    --gray-200: #26272f;
    --gray-300: #363843;
    --gray-400: #464852;
    --gray-500: #636674;
    --text-quiet: #9a9cae;
    --gray-600: #808290;
    --gray-700: #9a9cae;
    --gray-800: #b5b7c8;
    --gray-900: #f5f5f5;
    --light: #26272f;
    --light-active: #363843;
    --border: #26272f;
    --border-strong: #363843;

    --success: #00a261;
    --success-light: #1f212a;
    --success-text: #01bf73;
    --warning: #c59a00;
    --warning-light: #242320;
    --warning-text: #d9aa00;
    --danger: #e42855;
    --danger-light: #302024;
    --danger-text: #ff3767;
    --info: #883fff;
    --info-light: #272134;
    --info-text: #9e63ff;

    --surface-shadow: none;
    --header-shadow: none;
    --auth-shadow: none;
    --bar-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.4);
    --dropdown-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    --segment-track: #1b1c22;
    --segment-thumb: #363843;
    --segment-shadow: none;
    --auth-bg: url(/auth-bg-dark.jpg);
    color-scheme: dark;
  }
}

/* ---- phone width ------------------------------------------------------------------------------------------------- */

@media (max-width: 793.58px) {
  :root {
    --header-h: 4.2857rem;
    --gutter: 1.5385rem; /* 16 at the 10.4px root */
    --card-px: 1.5rem;
    --card-py: 1.5rem;
  }
}

/* ---- sign in (identical on both pages, Console AuthLayout and Login, section A.7) ---------------------------------
 * .auth .auth-card outranks each page's .card (this file is linked before app.css).
 */

body.is-signin .main {
  padding: 0;
}

.auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 2.5rem;
  background: var(--page) var(--auth-bg) center / cover no-repeat;
}

.auth-mark {
  width: 5.7143rem; /* 64: MEDIA_SIZE.lg 80px x 0.8 */
  height: 5.7143rem;
  margin-bottom: 2.5rem; /* 28 */
}

.auth .auth-card {
  width: 100%;
  max-width: 32.1429rem; /* 360 */
  padding: 2.5rem; /* 28 p-10 */
  border: 0;
  box-shadow: var(--auth-shadow);
}

@media (min-width: 793.59px) {
  .auth .auth-card {
    padding: 3rem; /* 33.6 p-lg-12 */
  }
}

:root[data-theme='dark'] .auth .auth-card {
  border: 1px solid var(--border-strong);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='dark']) .auth .auth-card {
    border: 1px solid var(--border-strong);
  }
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.auth-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.auth-head h1 {
  font-size: var(--fs-2x);
  font-weight: 600;
}

.auth-head p {
  color: var(--gray-600);
  font-size: var(--fs-6);
}

.auth-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--info-text);
  font-size: 0.95rem;
}

.auth-notice .icon {
  font-size: var(--glyph-adornment);
}

.auth-notice strong {
  font-weight: 600;
}

/* The line under a field: help, or the one error that replaces it. */
.field-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  min-height: 1.5em;
  color: var(--text-quiet);
  font-size: 0.95rem;
}

.field-msg.is-error {
  color: var(--danger-text);
  font-weight: 500;
}

.field-msg .icon {
  margin-top: 0.15em;
  font-size: 1.1rem;
}

.auth-foot {
  margin-top: 2.5rem; /* 28 mt-10 */
  color: var(--gray-600);
  font-size: 0.95rem;
}

@media (max-width: 793.58px) {
  .auth {
    padding: 2rem 1.5rem;
  }
}