/* =========================================================================
   Tú Produce Console — foundation
   Tokens, reset, and the controls shared by every screen.

   Palette provenance: the brand greens are the mobile app's own
   (app/src/main/res/values/colors.xml — colorPrimary #2D4F1E), so the console
   reads as the same product rather than a separate tool. The chart series
   hues are deliberately NOT in the green family: a series must never be
   mistakable for a status chip.
   ========================================================================= */

/* ---- Light: the complete palette lives here ---------------------------- */
:root {
  color-scheme: light;

  /* Grounds — a green-biased paper, not a neutral grey */
  --plane:        #EFF2E8;
  --surface:      #FFFFFF;
  --surface-2:    #F7F9F2;
  --surface-3:    #E9EEE0;

  /* Ink */
  --ink:          #141A0F;
  --ink-2:        #4F5748;
  --ink-3:        #7C8474;
  --ink-invert:   #FFFFFF;

  /* Structure */
  --line:         #DFE5D5;
  --line-strong:  #C7D0B8;

  /* Brand */
  --canopy:       #2D4F1E;
  --canopy-deep:  #1A3010;
  --canopy-lift:  #3B6628;
  --sprout:       #4A7A30;
  --wash:         #DCEBC9;
  --wash-2:       #EDF4E3;
  --on-canopy:    #FFFFFF;

  /* Status — fixed, never themed, never reused as a series colour */
  --good:         #0CA30C;
  --good-ink:     #076B07;
  --warn:         #FAB219;
  --warn-ink:     #8A5D00;
  --serious:      #EC835A;
  --serious-ink:  #9A4318;
  --critical:     #D03B3B;
  --critical-ink: #97201F;

  /* Categorical series — validated order (blue, orange, aqua, yellow) */
  --s1: #2A78D6;
  --s2: #EB6834;
  --s3: #1BAF7A;
  --s4: #EDA100;
  --s1-wash: rgba(42,120,214,.14);
  --s2-wash: rgba(235,104,52,.14);
  --s3-wash: rgba(27,175,122,.14);
  --s4-wash: rgba(237,161,0,.16);

  /* Sequential (ordinal-safe steps) */
  --seq-1: #CDE2FB;
  --seq-2: #9EC5F4;
  --seq-3: #6DA7EC;
  --seq-4: #3987E5;
  --seq-5: #256ABF;
  --seq-6: #184F95;

  /* Chart chrome */
  --grid:     #E6EADC;
  --axis:     #C7D0B8;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(20,26,15,.06), 0 1px 1px rgba(20,26,15,.04);
  --shadow-2: 0 6px 16px -6px rgba(20,26,15,.18), 0 2px 6px -2px rgba(20,26,15,.08);
  --shadow-3: 0 24px 48px -20px rgba(20,26,15,.30), 0 8px 20px -12px rgba(20,26,15,.16);
  --ring:     0 0 0 3px rgba(74,122,48,.34);

  /* Geometry */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Type */
  --display: "Chivo", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui:      "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Dark: OS preference, unless the viewer explicitly chose light ----- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --plane:        #0D110A;
    --surface:      #151A12;
    --surface-2:    #1B2117;
    --surface-3:    #232A1D;

    --ink:          #F2F5EC;
    --ink-2:        #B4BCA9;
    --ink-3:        #8A9280;
    --ink-invert:   #0D110A;

    --line:         #2A3223;
    --line-strong:  #3A442F;

    --canopy:       #8FC96C;
    --canopy-deep:  #6FAF4D;
    --canopy-lift:  #A3D782;
    --sprout:       #9ED37C;
    --wash:         #24331A;
    --wash-2:       #1C2616;
    --on-canopy:    #0D110A;

    --good-ink:     #6FD46F;
    --warn-ink:     #F5C459;
    --serious-ink:  #F3A886;
    --critical-ink: #F08A8A;

    --s1: #3987E5;
    --s2: #D95926;
    --s3: #199E70;
    --s4: #C98500;
    --s1-wash: rgba(57,135,229,.20);
    --s2-wash: rgba(217,89,38,.20);
    --s3-wash: rgba(25,158,112,.20);
    --s4-wash: rgba(201,133,0,.22);

    --seq-1: #184F95;
    --seq-2: #256ABF;
    --seq-3: #2A78D6;
    --seq-4: #3987E5;
    --seq-5: #6DA7EC;
    --seq-6: #9EC5F4;

    --grid:     #232A1D;
    --axis:     #3A442F;

    --shadow-1: 0 1px 2px rgba(0,0,0,.5);
    --shadow-2: 0 6px 16px -6px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.4);
    --shadow-3: 0 24px 48px -20px rgba(0,0,0,.8), 0 8px 20px -12px rgba(0,0,0,.5);
    --ring:     0 0 0 3px rgba(143,201,108,.36);
  }
}

/* ---- Dark: explicit toggle wins in both directions --------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --plane:        #0D110A;
  --surface:      #151A12;
  --surface-2:    #1B2117;
  --surface-3:    #232A1D;

  --ink:          #F2F5EC;
  --ink-2:        #B4BCA9;
  --ink-3:        #8A9280;
  --ink-invert:   #0D110A;

  --line:         #2A3223;
  --line-strong:  #3A442F;

  --canopy:       #8FC96C;
  --canopy-deep:  #6FAF4D;
  --canopy-lift:  #A3D782;
  --sprout:       #9ED37C;
  --wash:         #24331A;
  --wash-2:       #1C2616;
  --on-canopy:    #0D110A;

  --good-ink:     #6FD46F;
  --warn-ink:     #F5C459;
  --serious-ink:  #F3A886;
  --critical-ink: #F08A8A;

  --s1: #3987E5;
  --s2: #D95926;
  --s3: #199E70;
  --s4: #C98500;
  --s1-wash: rgba(57,135,229,.20);
  --s2-wash: rgba(217,89,38,.20);
  --s3-wash: rgba(25,158,112,.20);
  --s4-wash: rgba(201,133,0,.22);

  --seq-1: #184F95;
  --seq-2: #256ABF;
  --seq-3: #2A78D6;
  --seq-4: #3987E5;
  --seq-5: #6DA7EC;
  --seq-6: #9EC5F4;

  --grid:     #232A1D;
  --axis:     #3A442F;

  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 6px 16px -6px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.4);
  --shadow-3: 0 24px 48px -20px rgba(0,0,0,.8), 0 8px 20px -12px rgba(0,0,0,.5);
  --ring:     0 0 0 3px rgba(143,201,108,.36);
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* The slide-in panels are parked off the right edge. `clip` stops that
     parking spot from becoming scrollable width; `hidden` would make the
     root a scroll container and break the sticky top bar. */
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--plane);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--canopy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 2px solid var(--sprout); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Shared atoms ------------------------------------------------------ */
.eyebrow {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .06s ease, box-shadow .14s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--canopy); color: var(--on-canopy); }
.btn--primary:hover:not(:disabled) { background: var(--canopy-lift); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--canopy); }
.btn--quiet { background: transparent; color: var(--ink-2); height: 36px; padding: 0 10px; }
.btn--quiet:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.btn--block { width: 100%; }
.btn--sm { height: 34px; padding: 0 12px; font-size: 13px; }

.field { display: grid; gap: 7px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.input {
  height: 46px;
  width: 100%;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.input::placeholder { color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--sprout); box-shadow: var(--ring); }
.input[aria-invalid="true"] { border-color: var(--critical); }

.hint { font-size: 13px; color: var(--ink-3); }
.error-text { font-size: 13px; color: var(--critical-ink); font-weight: 500; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 23px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  background: var(--surface-3);
  color: var(--ink-2);
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pill--good     { background: rgba(12,163,12,.13);  color: var(--good-ink); }
.pill--warn     { background: rgba(250,178,25,.18); color: var(--warn-ink); }
.pill--serious  { background: rgba(236,131,90,.18); color: var(--serious-ink); }
.pill--critical { background: rgba(208,59,59,.14);  color: var(--critical-ink); }
.pill--plain::before { display: none; }

/* Brand mark — a canopy roundel over the wordmark */
.brandmark { display: inline-flex; align-items: center; gap: 11px; }
.brandmark__glyph {
  width: 34px; height: 34px;
  border-radius: 11px;
  background: var(--canopy);
  display: grid; place-items: center;
  flex: none;
}
.brandmark__glyph svg { width: 20px; height: 20px; }
.brandmark__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ink);
}
.brandmark__sub {
  display: block;
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Language picker — same control on the auth screens, the dashboard top bar
   and the profile page, so switching language is in the same place wherever
   you happen to be. */
.langsel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease;
}
.langsel:hover { border-color: var(--canopy); color: var(--ink); }
.langsel:focus-within { border-color: var(--sprout); box-shadow: var(--ring); }
.langsel > svg { width: 17px; height: 17px; flex: none; }
.langsel select {
  appearance: none;
  border: 0;
  background: none;
  padding: 0 2px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.langsel select:focus { outline: none; }
.langsel--block { width: 100%; height: 46px; justify-content: flex-start; }
.langsel--block select { flex: 1; }

/* Attribution footer — identical on every screen */
.attribution {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.attribution strong { font-weight: 600; color: var(--ink-2); }
.attribution .dot { opacity: .5; }