/* ==========================================================================
   Pasture Keeper design tokens: Harvest Gold
   --------------------------------------------------------------------------
   How it works
   - Every color in the app should come from a --pk-* variable, never a hex.
   - Theme: <html data-theme="light|dark">. With no data-theme set, the app
     follows the phone/computer setting ("Match my device").
   - Accent palettes (later): <html data-accent="..."> swaps ONLY the accent
     variables. Backgrounds, text and status colors never change, so every
     screen stays readable whatever accent someone picks.
   - The logo and app icon always stay Harvest Gold; accents are in-app
     personalization, not alternate brands.
   ========================================================================== */

/* ---------- Fonts ---------- */
/* Archivo and Zilla Slab are served by the app: see pk-fonts.css (loaded first). */

:root {
  --pk-font-display: "Zilla Slab", Georgia, "Times New Roman", serif;
  --pk-font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale (mobile first; bump on wide screens below) */
  --pk-text-xs: 0.8125rem;   /* 13px  small labels, chips */
  --pk-text-sm: 0.875rem;    /* 14px  secondary text */
  --pk-text-md: 1rem;        /* 16px  body, inputs (16px stops iOS zoom) */
  --pk-text-lg: 1.1875rem;   /* 19px  animal names, card titles */
  --pk-text-xl: 1.5rem;      /* 24px  section titles */
  --pk-text-2xl: 2rem;       /* 32px  page titles */

  /* Spacing (4px base) */
  --pk-space-1: 4px;
  --pk-space-2: 8px;
  --pk-space-3: 12px;
  --pk-space-4: 16px;
  --pk-space-5: 24px;
  --pk-space-6: 32px;
  --pk-space-7: 48px;

  /* Shape */
  --pk-radius-sm: 8px;
  --pk-radius-md: 12px;
  --pk-radius-lg: 18px;
  --pk-radius-pill: 999px;

  /* Touch: every button and tappable row at least this tall */
  --pk-tap: 44px;
}

@media (min-width: 900px) {
  :root { --pk-text-2xl: 2.25rem; }
}

/* ---------- Light theme (default) ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --pk-bg: #F5F3EE;            /* page background */
  --pk-surface: #FFFFFF;       /* cards, sheets, inputs */
  --pk-surface-2: #EEEBE3;     /* subtle fills: table stripes, hover */
  --pk-border: #DCD8CC;
  --pk-border-strong: #8C877A; /* input outlines (3:1 against surface) */

  --pk-text: #26372B;
  --pk-text-muted: #5F695A;

  --pk-primary: #2F5A3E;       /* main buttons, links, active nav */
  --pk-primary-hover: #244832;
  --pk-on-primary: #FFFFFF;

  --pk-accent: #D6A23E;        /* the tag: highlights, "due" chips, badges */
  --pk-on-accent: #26372B;
  --pk-accent-soft: #F6EBD3;   /* tinted backgrounds behind accent items */

  --pk-success: #2E7247;
  --pk-success-soft: #E1EFE4;
  --pk-danger: #A93A27;
  --pk-danger-soft: #F7E3DF;
  --pk-on-danger: #FFFFFF;

  --pk-focus: #2F5A3E;         /* keyboard focus ring */
  --pk-shadow: 0 1px 2px rgba(38, 55, 43, 0.06), 0 4px 16px rgba(38, 55, 43, 0.06);
}

/* ---------- Dark theme ---------- */
/* Same values twice: once for "Match my device" (no data-theme set),
   once for an explicit dark choice. Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --pk-bg: #151B17;
    --pk-surface: #1F2721;
    --pk-surface-2: #273129;
    --pk-border: #313B33;
    --pk-border-strong: #6E7A70;

    --pk-text: #ECE9E1;
    --pk-text-muted: #A9AE9F;

    --pk-primary: #D6A23E;
    --pk-primary-hover: #E3B456;
    --pk-on-primary: #1A1F1B;

    --pk-accent: #D6A23E;
    --pk-on-accent: #1A1F1B;
    --pk-accent-soft: #3A3220;

    --pk-success: #6FBF8A;
    --pk-success-soft: #1F3326;
    --pk-danger: #E8846C;
    --pk-danger-soft: #3D2420;
    --pk-on-danger: #1A1F1B;

    --pk-focus: #E3B456;
    --pk-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --pk-bg: #151B17;
  --pk-surface: #1F2721;
  --pk-surface-2: #273129;
  --pk-border: #313B33;
  --pk-border-strong: #6E7A70;

  --pk-text: #ECE9E1;
  --pk-text-muted: #A9AE9F;

  --pk-primary: #D6A23E;
  --pk-primary-hover: #E3B456;
  --pk-on-primary: #1A1F1B;

  --pk-accent: #D6A23E;
  --pk-on-accent: #1A1F1B;
  --pk-accent-soft: #3A3220;

  --pk-success: #6FBF8A;
  --pk-success-soft: #1F3326;
  --pk-danger: #E8846C;
  --pk-danger-soft: #3D2420;
  --pk-on-danger: #1A1F1B;

  --pk-focus: #E3B456;
  --pk-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* ---------- Accent palettes (not shipped yet) ----------
   When the accent picker is added after beta, each option is one small
   block like this, overriding only --pk-accent, --pk-on-accent and
   --pk-accent-soft (plus the dark-mode primary, which is the accent).
   Every new accent must pass the contrast check before it ships.

:root[data-accent="meadow"] { --pk-accent: #8CC06A; --pk-on-accent: #1D3324; --pk-accent-soft: #E6F1DD; }
:root[data-accent="meadow"][data-theme="dark"] { --pk-primary: #8CC06A; --pk-on-primary: #13201A; }
*/

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pk-bg);
  color: var(--pk-text);
  font-family: var(--pk-font-body);
  font-size: var(--pk-text-md);
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--pk-font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--pk-text);
}

a { color: var(--pk-primary); }
a:hover { color: var(--pk-primary-hover); }

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

/* ---------- Core components ---------- */
.pk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pk-space-2);
  min-height: var(--pk-tap);
  padding: 0 var(--pk-space-4);
  border-radius: var(--pk-radius-sm);
  border: 1px solid transparent;
  font: 700 var(--pk-text-md)/1 var(--pk-font-body);
  cursor: pointer;
  text-decoration: none;
}
.pk-btn--primary { background: var(--pk-primary); color: var(--pk-on-primary); }
.pk-btn--primary:hover { background: var(--pk-primary-hover); color: var(--pk-on-primary); }
.pk-btn--secondary { background: transparent; color: var(--pk-text); border-color: var(--pk-border-strong); }
.pk-btn--secondary:hover { background: var(--pk-surface-2); }
.pk-btn--danger { background: var(--pk-danger); color: var(--pk-on-danger); }

.pk-card {
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-md);
  padding: var(--pk-space-4);
  box-shadow: var(--pk-shadow);
}

.pk-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--pk-radius-pill);
  font-size: var(--pk-text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.pk-chip--due { background: var(--pk-accent); color: var(--pk-on-accent); }
.pk-chip--ok { background: var(--pk-success-soft); color: var(--pk-success); }
.pk-chip--alert { background: var(--pk-danger-soft); color: var(--pk-danger); }

.pk-input,
.pk-select,
.pk-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--pk-tap);
  padding: var(--pk-space-2) var(--pk-space-3);
  background: var(--pk-surface);
  color: var(--pk-text);
  border: 1px solid var(--pk-border-strong);
  border-radius: var(--pk-radius-sm);
  font: inherit;
  font-size: var(--pk-text-md);
}
.pk-label {
  display: block;
  margin-bottom: var(--pk-space-1);
  font-size: var(--pk-text-sm);
  font-weight: 600;
  color: var(--pk-text);
}
.pk-help { font-size: var(--pk-text-sm); color: var(--pk-text-muted); }

/* Segmented control (Appearance: Light / Dark / Match my device) */
.pk-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 4px;
  gap: 4px;
  background: var(--pk-surface-2);
  border-radius: var(--pk-radius-sm);
}
.pk-segmented button {
  min-height: 40px;
  padding: 0 var(--pk-space-4);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pk-text-muted);
  font: 600 var(--pk-text-sm)/1 var(--pk-font-body);
  cursor: pointer;
}
.pk-segmented button[aria-pressed="true"] {
  background: var(--pk-surface);
  color: var(--pk-text);
  box-shadow: var(--pk-shadow);
}

/* Logo swap: show the right logo file for the active theme */
.pk-logo--on-dark { display: none; }
:root[data-theme="dark"] .pk-logo--on-light { display: none; }
:root[data-theme="dark"] .pk-logo--on-dark { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pk-logo--on-light { display: none; }
  :root:not([data-theme="light"]) .pk-logo--on-dark { display: inline; }
}