/* ============================================================
   VENI DESIGN TOKENS — exported from
   Veni Living Pet-Tech Design System 2.0
   Do not hardcode these values; reference the CSS variables.
   ============================================================ */

/* ---- tokens/colors.css ---- */
/* ============================================================
   VENI COLOR TOKENS
   Core palette is fixed (brand identity). All other surfaces are
   derived by mixing the brand green with the milk value ladder or
   ink with controlled opacity. No new decorative brand color.
   ============================================================ */
:root{
  /* --- Brand green (fixed) --- */
  --veni-green:#2B4C3B;            /* Primary brand green */
  --veni-green-pressed:#3C6751;    /* Interactive / pressed */
  --veni-green-900:#1E3729;        /* Deepest green, on-green text backing */

  /* --- Milk surface ladder (fixed) --- */
  --milk-screen:#FAF8F4;           /* Screen background */
  --milk-card:#F5F0EA;             /* Card surface */
  --milk-inset:#EEE7DD;            /* Inset / secondary surface */
  --milk-border:#E2D8CB;           /* Hairline border */

  /* --- Ink (fixed) --- */
  --ink:#0D0F0B;                   /* Primary text */
  --ink-secondary:#5E605A;         /* Secondary text */

  /* --- Ink alphas: dividers, shadows, overlays --- */
  --ink-a06:rgba(13,15,11,.06);
  --ink-a08:rgba(13,15,11,.08);
  --ink-a12:rgba(13,15,11,.12);
  --ink-a24:rgba(13,15,11,.24);
  --ink-a40:rgba(13,15,11,.40);
  --ink-a60:rgba(13,15,11,.60);

  /* --- Tonal green surfaces (green mixed over milk / controlled opacity) --- */
  --green-a06:rgba(43,76,59,.06);  /* soft active background */
  --green-a08:rgba(43,76,59,.08);
  --green-a12:rgba(43,76,59,.12);  /* selected card */
  --green-a16:rgba(43,76,59,.16);
  --green-a24:rgba(43,76,59,.24);  /* stronger informational surface */
  --green-tint-1:#EFF1EC;          /* green ~6% baked over milk-screen */
  --green-tint-2:#E4E9E1;          /* green ~12% baked */
  --green-tint-3:#D4DDD1;          /* green ~24% baked, info surface */

  /* --- On-green text / marks --- */
  --on-green:#FAF8F4;              /* milk text on green */
  --on-green-secondary:rgba(250,248,244,.72);
  --on-green-border:rgba(250,248,244,.20);

  /* --- Functional colors (meaning only — never decorative accents) --- */
  --success:#2F7D53;   --success-surface:#E4F0E7;   --success-ink:#1C5334;
  --warning:#B5761B;   --warning-surface:#F6ECD8;   --warning-ink:#6E4708;
  --danger:#C0392B;    --danger-surface:#F7E4E1;    --danger-ink:#7C2018;
  --info:#356B8C;      --info-surface:#E1ECF2;      --info-ink:#204457;
  /* Live / real-time status (technology-in-service-of-care) */
  --live:#2F7D53;      --live-ring:rgba(47,125,83,.24);

  /* ---------- SEMANTIC ALIASES ---------- */
  --surface-screen:var(--milk-screen);
  --surface-card:var(--milk-card);
  --surface-inset:var(--milk-inset);
  --surface-selected:var(--green-tint-2);
  --surface-active:var(--green-a08);
  --surface-info:var(--green-tint-3);
  --surface-on-green:var(--veni-green);

  --text-primary:var(--ink);
  --text-secondary:var(--ink-secondary);
  --text-on-green:var(--on-green);
  --text-brand:var(--veni-green);

  --border-hairline:var(--milk-border);
  --border-strong:var(--ink-a12);
  --border-selected:var(--veni-green);

  --action-primary:var(--veni-green);
  --action-primary-pressed:var(--veni-green-pressed);
  --action-tonal:var(--green-a08);
  --action-tonal-pressed:var(--green-a16);

  --focus-ring:rgba(43,76,59,.45);
}


/* ---- tokens/typography.css ---- */
/* ============================================================
   VENI TYPOGRAPHY TOKENS
   Baloo 2 = warm display + emphatic numbers. Nunito Sans = UI/body.
   Semantic role tokens map to the mobile type scale. Sentence case.
   ============================================================ */
:root{
  --font-display:"Baloo 2","Trebuchet MS",sans-serif;
  --font-ui:"Nunito Sans","Helvetica Neue",Arial,sans-serif;

  /* Weights */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-extrabold:800; /* @kind font */

  /* --- Type scale: --t-<role> size / --t-<role>-lh line-height --- */
  --t-display:32px;    --t-display-lh:36px;   /* Baloo 2 Bold */
  --t-h1:28px;         --t-h1-lh:32px;        /* Baloo 2 Bold */
  --t-h2:22px;         --t-h2-lh:28px;        /* Baloo 2 Bold */
  --t-h3:18px;         --t-h3-lh:24px;        /* Nunito Sans Bold / Baloo 2 SemiBold */
  --t-body-lg:17px;    --t-body-lg-lh:24px;   /* Nunito Sans Regular */
  --t-body:15px;       --t-body-lh:22px;      /* Nunito Sans Regular */
  --t-body-strong:15px;--t-body-strong-lh:22px;/* Nunito Sans SemiBold */
  --t-caption:13px;    --t-caption-lh:18px;   /* Nunito Sans Regular */
  --t-label:12px;      --t-label-lh:16px;     /* Nunito Sans Bold */
  --t-micro:11px;      --t-micro-lh:14px;     /* Nunito Sans Bold */

  --tracking-tight:-0.01em; /* @kind font */
  --tracking-normal:0; /* @kind font */
  --tracking-overline:0.04em; /* @kind font */

  --num-tabular:"tnum" 1,"lnum" 1; /* @kind font */
}

/* Convenience role classes (optional; tokens are the contract). */
.veni-display{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--t-display);line-height:var(--t-display-lh);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.veni-h1{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--t-h1);line-height:var(--t-h1-lh);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.veni-h2{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--t-h2);line-height:var(--t-h2-lh);color:var(--text-primary)}
.veni-h3{font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:var(--t-h3);line-height:var(--t-h3-lh);color:var(--text-primary)}
.veni-body-lg{font-family:var(--font-ui);font-weight:var(--fw-regular);font-size:var(--t-body-lg);line-height:var(--t-body-lg-lh);color:var(--text-primary)}
.veni-body{font-family:var(--font-ui);font-weight:var(--fw-regular);font-size:var(--t-body);line-height:var(--t-body-lh);color:var(--text-primary)}
.veni-body-strong{font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:var(--t-body-strong);line-height:var(--t-body-strong-lh);color:var(--text-primary)}
.veni-caption{font-family:var(--font-ui);font-weight:var(--fw-regular);font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--text-secondary)}
.veni-label{font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:var(--t-label);line-height:var(--t-label-lh);color:var(--text-primary)}
.veni-micro{font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:var(--t-micro);line-height:var(--t-micro-lh);color:var(--text-secondary)}
.veni-overline{font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:var(--t-micro);line-height:var(--t-micro-lh);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--text-secondary)}
.veni-num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:var(--num-tabular)}


/* ---- tokens/spacing.css ---- */
/* ============================================================
   VENI SPACING & LAYOUT TOKENS — 8pt base with 4pt adjustments.
   ============================================================ */
:root{
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  --space-9:48px; --space-10:56px; --space-11:64px;

  /* Mobile horizontal padding */
  --pad-screen:16px;      /* default */
  --pad-spacious:20px;    /* text-forward content */
  /* immersive map/media extends edge-to-edge (0) */

  /* Grids */
  --grid-mobile-cols:4; /* @kind other */
  --grid-web-cols:12; /* @kind other */
  --gutter-mobile:16px; /* @kind spacing */
  --gutter-web:24px; /* @kind spacing */
  --content-max:1200px; /* @kind spacing */

  /* Responsive breakpoints */
  --bp-compact:0px; /* @kind other */
  --bp-medium:600px; /* @kind other */
  --bp-expanded:1024px; /* @kind other */

  /* Touch targets */
  --tap-min:44px; /* @kind spacing */
  --tap-comfortable:48px; /* @kind spacing */
}


/* ---- tokens/radius.css ---- */
/* ============================================================
   VENI SHAPE / RADIUS TOKENS
   Rounded and friendly, not bubbly. Branded asymmetry (the ear
   cut) is applied sparingly — one or two elements per screen.
   ============================================================ */
:root{
  --radius-sm:10px;      /* small controls, chips */
  --radius-input:12px;   /* inputs, compact buttons */
  --radius-card:16px;    /* standard cards */
  --radius-feature:20px; /* feature cards */
  --radius-media:24px;   /* hero / media cards */
  --radius-editorial:28px;/* large editorial sections */
  --radius-pill:999px;   /* pills, avatars */

  /* Branded "ear" asymmetry — one elongated corner echoing the V mark.
     Apply to at most one important element per screen. */
  --radius-ear-tl:28px; --radius-ear-tr:8px;
  --radius-ear-br:20px; --radius-ear-bl:20px;
}
.veni-ear{border-radius:var(--radius-ear-tl) var(--radius-ear-tr) var(--radius-ear-br) var(--radius-ear-bl)}


/* ---- tokens/elevation.css ---- */
/* ============================================================
   VENI ELEVATION — 4 levels. Controlled depth, warm ink shadows.
   ============================================================ */
:root{
  /* L0 base: no shadow. L1 tonal containment: value + optional hairline. */
  --elev-0:none;
  --elev-1:0 1px 0 var(--ink-a06);
  /* L2 interactive card */
  --elev-2:0 6px 24px rgba(13,15,11,.07);
  /* L3 floating contextual layer */
  --elev-3:0 16px 40px rgba(13,15,11,.10);
  /* Pressed / inset feedback */
  --elev-pressed:inset 0 1px 2px var(--ink-a08);

  /* Translucent material (nav bars, map overlays, sheet headers only) */
  --material-milk:rgba(250,248,244,.82);
  --material-green:rgba(43,76,59,.82);
  --material-blur:14px;
}


/* ---- tokens/motion.css ---- */
/* ============================================================
   VENI MOTION — motion confirms state, orientation or progress.
   ============================================================ */
:root{
  --dur-quick:140ms; /* @kind other */
  --dur-standard:210ms; /* @kind other */
  --dur-context:320ms; /* @kind other */

  --ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
  --ease-emphasis:cubic-bezier(.2,.8,.2,1); /* @kind other */
  --ease-exit:cubic-bezier(.4,.0,1,1); /* @kind other */

  --press-scale:.97; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-quick:0ms; /* @kind other */
    --dur-standard:0ms; /* @kind other */
    --dur-context:0ms; /* @kind other */
    --press-scale:1; /* @kind other */
  }
}


/* ---- tokens/misc.css ---- */
/* ============================================================
   VENI MISC TOKENS — opacity, z-index, icon sizes, media ratios.
   ============================================================ */
:root{
  --op-disabled:.40; /* @kind other */
  --op-muted:.64; /* @kind other */
  --op-overlay-scrim:.40; /* @kind other */
  --op-hover:.92; /* @kind other */

  --z-base:0; /* @kind other */
  --z-sticky:100; /* @kind other */
  --z-nav:200; /* @kind other */
  --z-sheet:300; /* @kind other */
  --z-overlay:400; /* @kind other */
  --z-modal:500; /* @kind other */
  --z-toast:600; /* @kind other */

  --icon-sm:20px; /* @kind spacing */
  --icon-md:24px; /* @kind spacing */
  --icon-lg:28px; /* @kind spacing */

  /* Media ratios */
  --ratio-profile:1/1; /* @kind other */
  --ratio-editorial:4/5; /* @kind other */
  --ratio-report:16/9; /* @kind other */
  --ratio-map-hero:3/2; /* @kind other */
}


/* ---- tokens/base.css ---- */
/* ============================================================
   VENI base layer — reset, defaults, link + selection styling.
   Imported by styles.css after tokens so it can use them.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:var(--t-body);
  line-height:var(--t-body-lh);
  color:var(--text-primary);
  background:var(--surface-screen);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-primary);margin:0;text-wrap:balance}
p{text-wrap:pretty}
img{max-width:100%;display:block}
button{font-family:inherit}

/* Links inherit the brand green; hover deepens to the pressed tone. */
a{color:var(--veni-green);text-decoration:none;transition:color var(--dur-quick) var(--ease-standard)}
a:hover{color:var(--veni-green-pressed);text-decoration:underline;text-underline-offset:2px}

::selection{background:var(--green-a24);color:var(--ink)}

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