/* Design tokens: two worlds, one signal. Values are the contract in docs/DESIGN.md. */

/* -- Fonts (self-hosted OFL, subsets and licences in app/static/fonts/README.md) -- */

/* Metric-matched fallback faces: local Arial adjusted to Poppins/Noto Sans metrics so the
   swap causes no layout shift. Overrides computed from the committed WOFF2 metrics. */

@font-face {
  font-family: "Poppins fallback";
  src: local("Arial");
  font-weight: 500;
  size-adjust: 116.51%;
  ascent-override: 90.12%;
  descent-override: 30.04%;
  line-gap-override: 8.58%;
}

@font-face {
  font-family: "Poppins fallback";
  src: local("Arial");
  font-weight: 600;
  size-adjust: 118.84%;
  ascent-override: 88.35%;
  descent-override: 29.45%;
  line-gap-override: 8.41%;
}

@font-face {
  font-family: "Noto Sans fallback";
  src: local("Arial");
  font-weight: 400;
  size-adjust: 108.28%;
  ascent-override: 98.72%;
  descent-override: 27.06%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Noto Sans fallback";
  src: local("Arial");
  font-weight: 500;
  size-adjust: 110.59%;
  ascent-override: 96.66%;
  descent-override: 26.49%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-ext-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-ext-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-latin-ext-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-latin-ext-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -- Tokens -- */

:root {
  --plx-green: #009688;
  --plx-green-deep: #00796b;
  --plx-ink: #1c1c1c;
  --plx-gray: #7a8286;
  --plx-mist: rgba(0, 150, 136, 0.1);
  --plx-paper: #f7faf9;
  --plx-night: #0b1716;
  --plx-night-2: #12221f;
  --plx-yellow: #fec011;
  --plx-pink: #e54f6d;
  --plx-plum: #724e91;

  /* -- Brand tokens (docs/tenants.md, BRAND-CONTRACT). The values here are the Plantix defaults, used when a
        tenant has no `brand` block. For a branded tenant the shell inlines a `:root` rule in the head that
        overrides exactly these eight tokens, computed and contrast-checked in app/core/brand.py. Exhibits
        read `var(--brand-primary)` etc. and never a hex. Badges, data ramps and error states never read them. -- */

  /* Buttons, active states, accents, header rule. A fill: with --brand-on-primary on top of it. */
  --brand-primary: var(--plx-green-deep);
  /* Text and icons on --brand-primary: white or #0F172A, whichever contrasts more (at least 4.5:1 when branded). */
  --brand-on-primary: #ffffff;
  /* Brand-coloured text and links: the theme's accent text, at least 4.5:1 on the canvas in either theme. */
  --brand-text: var(--t-accent-text);
  /* Decorative only, never text. */
  --brand-secondary: var(--plx-green);
  /* A second brand colour for fills and highlights. */
  --brand-accent: var(--plx-green);
  /* The old world names read the theme, so every scene follows the light or dark theme. */
  --world-farmer-bg: var(--t-canvas);
  --world-company-bg: var(--t-canvas-company);
  --world-company-surface: var(--t-surface);
  --brand-on-dark-accent: var(--t-accent-text);

  --tenant-accent: var(--brand-primary);

  --font-display: "Poppins", "Poppins fallback", system-ui, sans-serif;
  --font-body: "Noto Sans", "Noto Sans fallback", system-ui, sans-serif;

  --type-display: 64px;
  --type-h1: 44px;
  --type-h2: 30px;
  --type-h3: 22px;
  --type-body: 18px;
  --type-caption: 14px;
  --type-line-body: 1.6;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 45%, transparent);

  --motion-curve: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-fast: 180ms;
  --motion-base: 240ms;
  --motion-slow: 600ms;
  --motion-stagger: 60ms;
  --motion-cross: 700ms;

  --header-h: 68px;
  --rail-h: 64px;
  --gutter: 48px;

}

/* Themes. Light is the default; html[data-theme="dark"] turns every scene dark. The --t-* tokens are the
   theme: Plantix's own values here, a tenant's brand colours inlined by the shell (app/core/brand.py), one rule per
   theme. The semantic variables below read them, so a world is now only a flavour of the canvas. */

:root {
  /* Plantix's own theme values; a tenant brand overrides --tl-* (light) and --td-* (dark) from tenant.yaml. */
  --tl-canvas: #f7faf9;
  --tl-canvas-company: #f1f6f5;
  --tl-surface: #ffffff;
  --tl-ink: #1c1c1c;
  --tl-ink-2: #5c666a;
  --tl-accent: #009688;
  --tl-accent-text: #006f65;
  --tl-on-accent: #ffffff;
  --tl-tint: #e3f2ef;
  --td-canvas: #0b1716;
  --td-canvas-company: #0b1716;
  --td-surface: #13241f;
  --td-ink: #f2f6f5;
  --td-ink-2: #93a09f;
  --td-accent: #12a594;
  --td-accent-text: #3fc8ba;
  --td-on-accent: #06201d;
  --td-tint: #12302b;
  --t-canvas: var(--tl-canvas);
  --t-canvas-company: var(--tl-canvas-company);
  --t-surface: var(--tl-surface);
  --t-ink: var(--tl-ink);
  --t-ink-2: var(--tl-ink-2);
  --t-accent: var(--tl-accent);
  --t-accent-text: var(--tl-accent-text);
  --t-on-accent: var(--tl-on-accent);
  --t-tint: var(--tl-tint);
  --t-shadow-ink: 11, 23, 22;
  --t-shadow-strength: 1;

  /* Data colours per theme: the pressure ramp runs pale to strong on light, dark to bright on dark. */
  --ramp-0: #d9ede8;
  --ramp-1: #86cbbb;
  --ramp-2: #b5d36a;
  --ramp-3: #f2b33d;
  --ramp-4: #d8405f;
  --hot: #c3304f;
  --hot-fill: #e1506d;
  --hot-ink: #ffffff;
  --warn: #9a6200;
  --warn-fill: #f2b33d;
  --warn-ink: #2b1d00;
  --good: #0d7f5c;
  --good-fill: #2fb985;
  --chart-grid: rgba(11, 23, 22, 0.07);
  --action-ring: 0 1px 2px rgba(11, 23, 22, 0.18);
  /* Navigation chrome inside a product window (toolbar band and its active tab), apart from the cards. */
  --chrome-bg: color-mix(in srgb, var(--brand-primary) 12%, var(--tl-surface));
  --chrome-line: color-mix(in srgb, var(--brand-primary) 22%, transparent);
  --chrome-active: var(--brand-primary);
  /* A popover that floats over the page (notifications, menus). */
  --pop-bg: var(--tl-surface);
  --pop-line: rgba(11, 23, 22, 0.14);
  --pop-shadow: 0 1px 2px rgba(11, 23, 22, 0.08), 0 14px 30px -10px rgba(11, 23, 22, 0.24), 0 36px 70px -26px rgba(11, 23, 22, 0.32);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --t-canvas: var(--td-canvas);
  --t-canvas-company: var(--td-canvas-company);
  --t-surface: var(--td-surface);
  --t-ink: var(--td-ink);
  --t-ink-2: var(--td-ink-2);
  --t-accent: var(--td-accent);
  --t-accent-text: var(--td-accent-text);
  --t-on-accent: var(--td-on-accent);
  --t-tint: var(--td-tint);
  --t-shadow-ink: 0, 0, 0;
  --t-shadow-strength: 2.6;

  --ramp-0: #17504a;
  --ramp-1: #0a9a87;
  --ramp-2: #8fc26b;
  --ramp-3: #fec011;
  --ramp-4: #e54f6d;
  --hot: #f06c86;
  --hot-fill: #e54f6d;
  --hot-ink: #1b0c10;
  --warn: #fec011;
  --warn-fill: #fec011;
  --warn-ink: #1d1704;
  --good: #5fd3a8;
  --good-fill: #5fd3a8;
  --chart-grid: rgba(255, 255, 255, 0.06);
  --action-ring: 0 0 0 1px var(--brand-on-dark-accent);
  --chrome-bg: color-mix(in srgb, var(--brand-primary) 26%, #050d0c);
  --chrome-line: color-mix(in srgb, var(--td-accent) 28%, transparent);
  --chrome-active: var(--td-accent-text);
  --pop-bg: color-mix(in srgb, #ffffff 7%, var(--td-surface));
  --pop-line: rgba(255, 255, 255, 0.14);
  --pop-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 18px 40px -10px rgba(0, 0, 0, 0.7), 0 44px 90px -24px rgba(0, 0, 0, 0.65);
  color-scheme: dark;
}

:root,
[data-world] {
  --surface: var(--t-canvas);
  --surface-2: var(--t-surface);
  --surface-mist: color-mix(in srgb, var(--t-accent) 11%, transparent);
  --text: var(--t-ink);
  --text-secondary: var(--t-ink-2);
  --text-on-signal: var(--t-on-accent);
  --border: color-mix(in srgb, var(--t-ink) 13%, transparent);
  --border-strong: color-mix(in srgb, var(--t-ink) 24%, transparent);
  --line: color-mix(in srgb, var(--t-ink) 9%, transparent);
  --fill-1: color-mix(in srgb, var(--t-ink) 3.5%, transparent);
  --fill-2: color-mix(in srgb, var(--t-ink) 7%, transparent);
  --track: color-mix(in srgb, var(--t-ink) 8%, transparent);
  --signal: var(--plx-green);
  --signal-strong: var(--plx-green-deep);
  --signal-text: var(--t-accent-text);
  --shadow-1: 0 1px 2px rgba(var(--t-shadow-ink), calc(0.06 * var(--t-shadow-strength))), 0 1px 1px rgba(var(--t-shadow-ink), calc(0.04 * var(--t-shadow-strength)));
  --shadow-2: 0 1px 2px rgba(var(--t-shadow-ink), calc(0.05 * var(--t-shadow-strength))), 0 14px 32px -10px rgba(var(--t-shadow-ink), calc(0.14 * var(--t-shadow-strength)));
  --shadow-3: 0 2px 4px rgba(var(--t-shadow-ink), calc(0.05 * var(--t-shadow-strength))), 0 30px 60px -24px rgba(var(--t-shadow-ink), calc(0.22 * var(--t-shadow-strength)));

  /* Three roles that never share a fill: an action (solid primary, ghost secondary), a read-only tag (soft
     tint, no dot) and a status (neutral fill with a coloured dot, the "Operational" look). */
  --action-bg: var(--brand-primary);
  --action-ink: var(--brand-on-primary);
  --action-ghost-ink: var(--brand-text);
  --action-ghost-line: color-mix(in srgb, var(--brand-text) 55%, transparent);
  --tag-bg: color-mix(in srgb, var(--hot) 11%, transparent);
  --tag-ink: var(--hot);
  --tag-neutral-bg: color-mix(in srgb, var(--t-ink) 7%, transparent);
  --status-bg: color-mix(in srgb, var(--t-ink) 4%, var(--t-surface));
  --status-line: color-mix(in srgb, var(--t-ink) 12%, transparent);
  --status-ink: var(--t-ink);
  --status-good: var(--good);
  --status-warn: var(--warn);
  --status-hot: var(--hot);
}

[data-world="company"] {
  --surface: var(--t-canvas-company);
}

/* A part of a scene that keeps the light look in both themes (the grower's phone). */
.theme-light,
.theme-light [data-world] {
  --t-canvas: var(--tl-canvas);
  --t-canvas-company: var(--tl-canvas-company);
  --t-surface: var(--tl-surface);
  --t-ink: var(--tl-ink);
  --t-ink-2: var(--tl-ink-2);
  --t-accent: var(--tl-accent);
  --t-accent-text: var(--tl-accent-text);
  --t-on-accent: var(--tl-on-accent);
  --t-tint: var(--tl-tint);
  --t-shadow-ink: 11, 23, 22;
  --t-shadow-strength: 1;
  --brand-text: var(--tl-accent-text);
  --brand-on-dark-accent: var(--tl-accent-text);
  --world-farmer-bg: var(--tl-canvas);
  --world-company-bg: var(--tl-canvas-company);
  --world-company-surface: var(--tl-surface);
  --surface: var(--t-canvas);
  --surface-2: var(--t-surface);
  --surface-mist: color-mix(in srgb, var(--t-accent) 11%, transparent);
  --text: var(--t-ink);
  --text-secondary: var(--t-ink-2);
  --text-on-signal: var(--t-on-accent);
  --border: color-mix(in srgb, var(--t-ink) 13%, transparent);
  --border-strong: color-mix(in srgb, var(--t-ink) 24%, transparent);
  --signal-text: var(--t-accent-text);
  color-scheme: light;
}

@media (max-width: 1023px) {
  :root {
    --type-display: 52px;
    --type-h1: 38px;
    --type-h2: 27px;
    --type-h3: 21px;
    --type-body: 17px;
    --gutter: 32px;
    --header-h: 72px;
    --rail-h: 68px;
  }
}

@media (max-width: 480px) {
  :root {
    --type-display: 40px;
    --type-h1: 32px;
    --type-h2: 24px;
    --type-h3: 20px;
    --type-body: 16px;
    --gutter: 16px;
    --header-h: 64px;
    --rail-h: 60px;
  }
}