/* Direction: premium organic farm — warm ivory paper, forest green sidebar, terracotta actions, a soft serif display */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #faf6ec;
  --surface: #fffdf7;
  --surface-2: #f3eddd;
  --border: #e3dac6;
  --border-strong: #b7b1a9;
  --ink: #46382f;
  --muted: #6b5e53;
  --accent: #c77754;
  --accent-hover: #a96547;
  --accent-ink: #1c110c;
  --accent-text: #9c4b2d;
  --accent-strong: #844e37;
  --accent-soft: #f3dacd;
  --accent-border: #e3bda8;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfe8d7;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e2d1;
  --warning-strong: #a64c08;
  --danger: #a8392a;
  --danger-ink: #ffffff;
  --danger-soft: #f0dfd5;
  --danger-strong: #a8392a;
  --chart-1: #c77754;
  --chart-2: #9a9015;
  --chart-3: #078c64;
  --chart-4: #059ac2;
  --chart-5: #6c67bd;
  --chart-6: #c870a6;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --shadow-card: 0 1px 2px rgb(70 56 47 / 0.06), 0 10px 28px -14px rgb(70 56 47 / 0.22);
  --x-forest: #244C3A;
  --x-forest-deep: #1B3B2D;
  --x-sage: #A3B79A;
  --x-soil: #46382F;
  --x-ivory: #FAF6EC;
  --x-terra: #C77754;
  --x-ok-soft: #DDE8D6;
  --x-ok-ink: #1F4430;
  --x-warn-soft: #F6DFC9;
  --x-warn-ink: #7A3F17;
  --x-bad-soft: #F2D1C8;
  --x-bad-ink: #85281A;
  --x-neutral-soft: #E8E1D2;
  --x-neutral-ink: #46382F;
  --x-on-photo: #FFFFFF;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #180e0a;
  --surface: #2f2623;
  --surface-2: #241a16;
  --border: #38302c;
  --border-strong: #5d5654;
  --ink: #faf6ec;
  --muted: #a09992;
  --accent: #c77754;
  --accent-hover: #cf8b6e;
  --accent-ink: #1c110c;
  --accent-text: #cb8262;
  --accent-strong: #cb8262;
  --accent-soft: #3f251a;
  --accent-border: #673d2b;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #172715;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #3a1d0a;
  --warning-strong: #c57a40;
  --danger: #a8392a;
  --danger-ink: #ffffff;
  --danger-soft: #381711;
  --danger-strong: #c57c72;
  --chart-1: #c77754;
  --chart-2: #b8ae40;
  --chart-3: #1e966d;
  --chart-4: #1db5e0;
  --chart-5: #7873ca;
  --chart-6: #e085bb;
}

/* RootBasket shell */
.rb-side { position: fixed; inset: 0 auto 0 0; width: 264px; background: linear-gradient(180deg, var(--x-forest) 0%, var(--x-forest-deep) 100%); color: var(--x-ivory); display: flex; flex-direction: column; z-index: 40; transition: transform .25s ease; }
.rb-main { margin-left: 264px; min-height: 100vh; }
.rb-top { display: none; }
.rb-scrim { display: none; }
.rb-nav a { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: 10px; color: color-mix(in srgb, var(--x-ivory) 82%, transparent); font-weight: 500; font-size: .95rem; transition: background .15s, color .15s; }
.rb-nav a:hover { background: color-mix(in srgb, var(--x-ivory) 10%, transparent); color: var(--x-ivory); }
.rb-nav a:focus-visible { outline: 2px solid var(--x-sage); outline-offset: 2px; }
.rb-nav a[aria-current="page"] { background: color-mix(in srgb, var(--x-ivory) 14%, transparent); color: var(--x-ivory); box-shadow: inset 3px 0 0 var(--x-terra); }
.rb-nav .icon { color: var(--x-sage); }
.rb-side .btn-ghost { color: var(--x-ivory); }
.rb-side .btn-ghost:hover { background: color-mix(in srgb, var(--x-ivory) 12%, transparent); }
.rb-side-foot { border-top: 1px solid color-mix(in srgb, var(--x-ivory) 16%, transparent); }
@media (max-width: 1023px) {
  .rb-side { transform: translateX(-100%); box-shadow: 0 0 40px rgb(0 0 0 / .35); }
  body.nav-open .rb-side { transform: none; }
  .rb-main { margin-left: 0; }
  .rb-top { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; background: var(--x-forest); color: var(--x-ivory); position: sticky; top: 0; z-index: 30; }
  .rb-top .btn-ghost { color: var(--x-ivory); }
  body.nav-open .rb-scrim { display: block; position: fixed; inset: 0; background: rgb(27 59 45 / .55); z-index: 35; }
}

/* Cards */
.rb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.rb-pad { padding: 1.25rem 1.4rem; overflow-wrap: anywhere; }
.rb-card, .rb-main .grid > * { min-width: 0; }.rb-stat { transition: transform .18s ease, box-shadow .18s ease; display: block; }
.rb-stat:hover { transform: translateY(-2px); }
.rb-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rb-stat-ico { width: 2.4rem; height: 2.4rem; border-radius: 12px; display: grid; place-items: center; background: var(--x-ok-soft); color: var(--x-ok-ink); }
.rb-stat-ico.warn { background: var(--x-warn-soft); color: var(--x-warn-ink); }
.rb-stat-ico.bad { background: var(--x-bad-soft); color: var(--x-bad-ink); }

/* Status pills */
.rb-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.rb-badge::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; opacity: .8; }
.rb-ok { background: var(--x-ok-soft); color: var(--x-ok-ink); }
.rb-warn { background: var(--x-warn-soft); color: var(--x-warn-ink); }
.rb-bad { background: var(--x-bad-soft); color: var(--x-bad-ink); }
.rb-n { background: var(--x-neutral-soft); color: var(--x-neutral-ink); }
.rb-tag { display: inline-block; padding: .15rem .55rem; border-radius: 8px; font-size: .74rem; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }

/* Tables */
.rb-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
.rb-table th { text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: .7rem .9rem; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.rb-table td { padding: .8rem .9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.rb-table tbody tr:hover { background: color-mix(in srgb, var(--x-sage) 10%, transparent); }
.rb-table tr.rb-low { background: color-mix(in srgb, var(--x-terra) 9%, transparent); }
.rb-wrap { overflow-x: auto; border-radius: var(--radius-card); }

/* Tabs + alerts */
.rb-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-weight: 500; font-size: .9rem; color: var(--ink); transition: background .15s, color .15s; }
.rb-tab:hover { background: var(--surface-2); }
.rb-tab[aria-current="page"] { background: var(--x-forest); border-color: var(--x-forest); color: var(--x-ivory); }
.rb-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rb-alert-err { border-color: var(--x-bad-ink); background: var(--x-bad-soft); color: var(--x-bad-ink); }
.rb-alert-ok { border-color: var(--x-sage); background: var(--x-ok-soft); color: var(--x-ok-ink); }
.rb-bar { height: .55rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rb-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--x-forest); transform-origin: left; animation: rb-grow .8s ease both; }
.rb-bar > i.t { background: var(--x-terra); }
.rb-bar > i.s { background: var(--x-sage); }
@keyframes rb-grow { from { transform: scaleX(.1); } to { transform: scaleX(1); } }
html.reduced-motion .rb-bar > i { animation: none; }

/* Auth */
.rb-auth-art { background: linear-gradient(160deg, var(--x-forest) 0%, var(--x-forest-deep) 100%); color: var(--x-ivory); position: relative; overflow: hidden; }
.rb-auth-art::after { content: ""; position: absolute; width: 28rem; height: 28rem; border-radius: 50%; right: -9rem; bottom: -9rem; background: radial-gradient(circle, color-mix(in srgb, var(--x-sage) 35%, transparent), transparent 70%); pointer-events: none; }

.rb-box-img { aspect-ratio: 16 / 9; background: var(--x-ok-soft); display: grid; place-items: center; color: var(--x-forest); overflow: hidden; }
.rb-box-img img { width: 100%; height: 100%; object-fit: cover; }
.rb-check { display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem; border: 1px solid var(--border); border-radius: 10px; font-size: .85rem; background: var(--surface); }
.rb-check:has(input:checked) { border-color: var(--x-forest); background: var(--x-ok-soft); color: var(--x-ok-ink); }
.rb-check.off { opacity: .55; }