/*
 * Orangineer design tokens
 * Source of truth: docs/huisstijl/huisstijl.md (colours sampled from
 * assets/brand/orangineer-logo-origineel.jpg; contrast ratios checked against WCAG 2.2).
 *
 * Usage: load AFTER pico.css, e.g.
 *   <link rel="stylesheet" href="/static/css/pico.min.css">
 *   <link rel="stylesheet" href="/static/css/tokens.css">
 *   <link rel="stylesheet" href="/static/css/app.css">
 *
 * Font URLs assume this file is served from /static/css/ and the woff2 files from
 * assets/brand/fonts/ are copied to /static/fonts/. No external hosts (CSP).
 * Dark mode follows the OS setting, and can be forced with
 * <html data-theme="light"> or <html data-theme="dark"> (same convention as Pico v2).
 */

/* ---------- Fonts (SIL OFL 1.1, see assets/brand/fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-latin-400-italic.woff2") format("woff2");
}
/* Lato has no 600; 600 requests fall back to 700. */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/lato-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/lato-latin-700-italic.woff2") format("woff2");
}

/* ---------- Theme-independent tokens ---------- */
:root {
  /* Brand (exact logo colours) */
  --or-brand-orange: #fe7816; /* logo orange: decorative only on light bg (2.65:1 on white) */
  --or-brand-slate: #626e7a;  /* logo grey: 5.21:1 on white */

  /* Typography */
  --or-font-heading: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --or-font-body: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  --or-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --or-font-size-base: 1rem;      /* 16px */
  --or-font-size-sm: 0.875rem;    /* 14px */
  --or-font-size-xs: 0.75rem;     /* 12px */
  --or-line-height: 1.6;
  --or-line-height-heading: 1.2;
  --or-weight-regular: 400;
  --or-weight-semibold: 600;
  --or-weight-bold: 700;
  --or-button-letter-spacing: 0.06em;

  /* Shape & spacing */
  --or-radius-sm: 4px;
  --or-radius: 6px;
  --or-radius-lg: 10px;
  --or-space-1: 0.25rem;
  --or-space-2: 0.5rem;
  --or-space-3: 0.75rem;
  --or-space-4: 1rem;
  --or-space-6: 1.5rem;
  --or-space-8: 2rem;
  --or-accent-line: 3px;          /* orange accent rule (header, invoice) */
  --or-focus-width: 2px;
  --or-focus-offset: 2px;
  --or-transition: 120ms ease-out;
}

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

  /* Primary action colour: darker tint of the logo orange so white text passes AA */
  --or-primary: #b34d00;          /* white on it 5.28:1; as text on white 5.28:1 */
  --or-primary-hover: #9a4300;    /* white on it 6.61:1 */
  --or-primary-active: #863a00;   /* white on it 8.02:1 */
  --or-primary-light: #fff4eb;    /* tint bg; #b34d00 on it 4.87:1, text on it 14.45:1 */
  --or-primary-light-border: #ffd2ad;
  --or-on-primary: #ffffff;
  --or-accent: var(--or-brand-orange); /* rules, icons, logo, chart highlight (non-text) */

  /* Neutrals */
  --or-text: #1e242b;             /* 15.64:1 on bg, 14.59:1 on surface */
  --or-text-muted: #626e7a;       /* logo slate; 5.21:1 on bg, 4.86:1 on surface */
  --or-heading: #1e242b;
  --or-bg: #ffffff;
  --or-surface: #f6f7f9;          /* cards, table header, zebra rows */
  --or-surface-raised: #ffffff;
  --or-border: #d9dee3;           /* decorative dividers (not for inputs) */
  --or-border-strong: #7c8794;    /* inputs/outline controls; 3.65:1 on bg, 3.41:1 on surface */
  --or-focus: #b34d00;            /* focus ring, 5.28:1 on bg */

  /* Status (text colour on white / on its own tint bg) */
  --or-success: #1e7a3c;          /* 5.38:1 / 4.84:1 */
  --or-success-bg: #eaf6ee;
  --or-warning: #8a5300;          /* 6.33:1 / 5.88:1 */
  --or-warning-bg: #fff6e0;
  --or-error: #b42318;            /* 6.57:1 / 5.75:1 */
  --or-error-bg: #fdecea;
  --or-info: #626e7a;
  --or-info-bg: #f6f7f9;

  --or-shadow: 0 1px 2px rgb(30 36 43 / 0.06), 0 2px 8px rgb(30 36 43 / 0.06);
}

/* ---------- Dark theme ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --or-primary: #fe7816;          /* logo orange works on dark: 6.77:1 on bg */
    --or-primary-hover: #ff9a4d;
    --or-primary-active: #ffb27a;
    --or-primary-light: #2a1c11;    /* tint bg; #fe7816 on it 6.22:1 */
    --or-primary-light-border: #5a3414;
    --or-on-primary: #14171b;       /* dark text on orange buttons: 6.77:1 (hover 8.54:1) */
    --or-accent: var(--or-brand-orange);

    --or-text: #e8ebee;             /* 15.02:1 on bg, 13.67:1 on surface */
    --or-text-muted: #a9b2bc;       /* 8.37:1 on bg, 7.62:1 on surface */
    --or-heading: #f3f5f7;
    --or-bg: #14171b;
    --or-surface: #1c2026;
    --or-surface-raised: #1c2026;
    --or-border: #343a42;
    --or-border-strong: #8a95a1;    /* 5.90:1 on bg, 5.37:1 on surface */
    --or-focus: #fe7816;

    --or-success: #5cc98a;
    --or-success-bg: #13261b;
    --or-warning: #f2b84b;
    --or-warning-bg: #2b2210;
    --or-error: #ff7a6e;
    --or-error-bg: #2e1715;
    --or-info: #a9b2bc;
    --or-info-bg: #1c2026;

    --or-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px rgb(0 0 0 / 0.3);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --or-primary: #fe7816;
  --or-primary-hover: #ff9a4d;
  --or-primary-active: #ffb27a;
  --or-primary-light: #2a1c11;
  --or-primary-light-border: #5a3414;
  --or-on-primary: #14171b;
  --or-accent: var(--or-brand-orange);

  --or-text: #e8ebee;
  --or-text-muted: #a9b2bc;
  --or-heading: #f3f5f7;
  --or-bg: #14171b;
  --or-surface: #1c2026;
  --or-surface-raised: #1c2026;
  --or-border: #343a42;
  --or-border-strong: #8a95a1;
  --or-focus: #fe7816;

  --or-success: #5cc98a;
  --or-success-bg: #13261b;
  --or-warning: #f2b84b;
  --or-warning-bg: #2b2210;
  --or-error: #ff7a6e;
  --or-error-bg: #2e1715;
  --or-info: #a9b2bc;
  --or-info-bg: #1c2026;

  --or-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px rgb(0 0 0 / 0.3);
}

/* ---------- Pico CSS v2 mapping ----------
 * Same selectors as Pico, so (loaded after pico.css) these win without !important.
 * Values reference the --or-* tokens, so they follow the active theme automatically.
 */
:root:not([data-theme="dark"]),
[data-theme="light"],
[data-theme="dark"] {
  --pico-font-family: var(--or-font-body);
  --pico-font-family-sans-serif: var(--or-font-body);
  --pico-font-family-monospace: var(--or-font-mono);
  --pico-line-height: var(--or-line-height);
  --pico-border-radius: var(--or-radius);

  --pico-background-color: var(--or-bg);
  --pico-color: var(--or-text);
  --pico-h1-color: var(--or-heading);
  --pico-h2-color: var(--or-heading);
  --pico-h3-color: var(--or-heading);
  --pico-h4-color: var(--or-heading);
  --pico-h5-color: var(--or-heading);
  --pico-h6-color: var(--or-heading);
  --pico-muted-color: var(--or-text-muted);
  --pico-muted-border-color: var(--or-border);

  --pico-primary: var(--or-primary);
  --pico-primary-background: var(--or-primary);
  --pico-primary-border: var(--or-primary);
  --pico-primary-underline: color-mix(in srgb, var(--or-primary) 50%, transparent);
  --pico-primary-hover: var(--or-primary-hover);
  --pico-primary-hover-background: var(--or-primary-hover);
  --pico-primary-hover-border: var(--or-primary-hover);
  --pico-primary-hover-underline: var(--or-primary-hover);
  --pico-primary-focus: color-mix(in srgb, var(--or-focus) 40%, transparent);
  --pico-primary-inverse: var(--or-on-primary);

  --pico-secondary: var(--or-text-muted);
  --pico-secondary-background: var(--or-brand-slate);
  --pico-secondary-border: var(--or-brand-slate);
  --pico-secondary-inverse: #ffffff;

  --pico-card-background-color: var(--or-surface-raised);
  --pico-card-sectioning-background-color: var(--or-surface);
  --pico-card-box-shadow: var(--or-shadow);

  --pico-form-element-background-color: var(--or-bg);
  --pico-form-element-border-color: var(--or-border-strong);
  --pico-form-element-color: var(--or-text);
  --pico-form-element-placeholder-color: var(--or-text-muted);
  --pico-form-element-active-border-color: var(--or-primary);
  --pico-form-element-focus-color: var(--or-focus);
  --pico-form-element-invalid-border-color: var(--or-error);
  --pico-form-element-valid-border-color: var(--or-success);

  --pico-table-border-color: var(--or-border);
  --pico-table-row-stripped-background-color: var(--or-surface);
  --pico-mark-background-color: var(--or-primary-light);
  --pico-mark-color: var(--or-text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-font-family: var(--or-font-body);
    --pico-font-family-sans-serif: var(--or-font-body);
    --pico-background-color: var(--or-bg);
    --pico-color: var(--or-text);
    --pico-h1-color: var(--or-heading);
    --pico-h2-color: var(--or-heading);
    --pico-h3-color: var(--or-heading);
    --pico-h4-color: var(--or-heading);
    --pico-h5-color: var(--or-heading);
    --pico-h6-color: var(--or-heading);
    --pico-muted-color: var(--or-text-muted);
    --pico-muted-border-color: var(--or-border);
    --pico-primary: var(--or-primary);
    --pico-primary-background: var(--or-primary);
    --pico-primary-border: var(--or-primary);
    --pico-primary-underline: color-mix(in srgb, var(--or-primary) 50%, transparent);
    --pico-primary-hover: var(--or-primary-hover);
    --pico-primary-hover-background: var(--or-primary-hover);
    --pico-primary-hover-border: var(--or-primary-hover);
    --pico-primary-hover-underline: var(--or-primary-hover);
    --pico-primary-focus: color-mix(in srgb, var(--or-focus) 40%, transparent);
    --pico-primary-inverse: var(--or-on-primary);
    --pico-card-background-color: var(--or-surface-raised);
    --pico-card-sectioning-background-color: var(--or-surface);
    --pico-card-box-shadow: var(--or-shadow);
    --pico-form-element-background-color: var(--or-bg);
    --pico-form-element-border-color: var(--or-border-strong);
    --pico-form-element-color: var(--or-text);
    --pico-form-element-placeholder-color: var(--or-text-muted);
    --pico-form-element-active-border-color: var(--or-primary);
    --pico-form-element-focus-color: var(--or-focus);
    --pico-form-element-invalid-border-color: var(--or-error);
    --pico-form-element-valid-border-color: var(--or-success);
    --pico-table-border-color: var(--or-border);
    --pico-table-row-stripped-background-color: var(--or-surface);
    --pico-mark-background-color: var(--or-primary-light);
    --pico-mark-color: var(--or-text);
  }
}

/* Headings use the geometric brand face; body text stays Lato via --pico-font-family. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--or-font-heading);
  font-weight: var(--or-weight-bold);
  line-height: var(--or-line-height-heading);
  letter-spacing: -0.01em;
}