/* ==========================================================================
   Joripo design tokens -- the one place colour is decided
   --------------------------------------------------------------------------
   Every stylesheet (joripo-ui.css, joripo.css and its scoped copy
   joripo-classic.css, joripo-admin.css, tester.css) and every page shell
   (Joripo 2.0, the Legacy console, Master Admin, sign-in, the Form Designer
   and the web form) reads these custom properties; none of them names a
   colour of its own (tests/test_design_tokens.py holds them to that). Loaded
   right after fonts.css by every shell.

   Palette: Joripo's brand sheet (decision D10) -- #1F6B5B green, #F4A62A
   amber, #E6F2EC / #F9F9F5 canvas, #1E2933 ink, #6B7B88 muted.

   Themes
     light   :root, below
     dark    :root[data-theme="dark"]. The person picks System, Light or
             Dark (the account menu in Joripo 2.0, the user menu in the
             Legacy console, the top bar in Master Admin); the choice is a
             cookie, joripo_theme. The server writes data-theme on <html>
             for an explicit choice, and templates/partials/theme_head.html
             (a few lines of inline script in every <head>) resolves System
             from the device before the first paint, so no page flashes.

   Contrast (WCAG 2.2 AA, tests/test_design_tokens.py, both themes): text
   4.5:1 on every surface and tint it sits on; large text, control edges,
   focus rings and chart marks 3:1.

   Three families of names live here, because three stylesheets grew up
   apart: the 2.0 scale (--brand-600, --ink-900, --surface ...), the classic
   console's roles (--color-primary, --color-text ...) and the Form
   Designer's (--fd-*). Where a classic role is a 2.0 colour it says so with
   var(); it never refers to --line, --line-2, --warning or --info, which
   joripo.css re-declares as aliases of the classic roles (a loop would
   leave both unset).

   design/joripo-tokens.json is generated from this file
   (scripts/export_design_tokens.py) -- edit here, not there.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- brand ---------------------------------------------------------- */
  --brand-50: #E6F2EC; --brand-100: #CCE5D9; --brand-200: #9FCDB7;
  --brand-500: #2A8570; --brand-600: #1F6B5B; --brand-700: #17564A; --brand-800: #113F37;
  --accent-100: #FDEBC8; --accent-500: #F4A62A; --accent-700: #9A5B05;
  --on-brand: #FFFFFF;                 /* text and icons on a brand fill */
  --on-accent: #1E2933;                /* text and icons on the amber fill */

  /* ---- neutrals ------------------------------------------------------- */
  --ink-900: #1E2933;                  /* text */
  --ink-700: #34424E;                  /* secondary text */
  --ink-600: #52616D;                  /* muted text: the sheet's #6B7B88 fails AA for small text */
  --ink-400: #6B7B88;                  /* icons and large text only */
  --ink-300: #9AA6B0;                  /* decoration only: separators, disabled marks */
  --canvas: #F9F9F5;                   /* the page */
  --surface: #FFFFFF;                  /* cards, menus, dialogs */
  --surface-2: #F3F5F1;                /* table heads, toolbars, hover */
  --surface-3: #ECEEEA;                /* pressed, footer band */
  --line: #E3E6E1;                     /* dividers */
  --line-2: #D3D8D2;                   /* button edges */
  --control-line: #7D8A94;             /* edges of fields, selects, checkboxes: 3:1 */
  --scrim: rgba(16, 24, 32, .45);      /* behind a dialog */
  --media-backdrop: #FFFFFF;           /* behind a form's pictures and a submission's signatures,
                                          drawings and photos: white in both themes (often black on
                                          a transparent background, they vanish on a dark card) */

  /* ---- status --------------------------------------------------------- */
  --danger: #B42318; --danger-50: #FEF3F2; --danger-line: #FECDCA;
  --danger-fill: #D92D20; --danger-fill-hover: #B42318; --on-danger: #FFFFFF;
  --warning: #B54708; --warning-50: #FFFAEB; --warning-line: #FEDF89;
  --success: #067647; --success-50: #ECFDF3; --success-line: #ABEFC6;
  --success-fill: #067647; --success-fill-hover: #05603A; --on-success: #FFFFFF;
  --info: #175CD3; --info-50: #EFF8FF; --info-line: #B2DDFF;

  /* ---- elevation ------------------------------------------------------ */
  --shadow-1: 0 1px 2px rgba(16, 24, 32, .06), 0 1px 3px rgba(16, 24, 32, .05);
  --shadow-2: 0 12px 32px -8px rgba(16, 24, 32, .22), 0 2px 6px rgba(16, 24, 32, .08);
  --shadow-box: 0 1px 2px rgba(16, 24, 32, .06), 0 1px 3px rgba(16, 24, 32, .05);
  --shadow-menu: 0 12px 32px -8px rgba(16, 24, 32, .22), 0 2px 6px rgba(16, 24, 32, .08);
  --shadow-modal: 0 24px 48px -12px rgba(16, 24, 32, .35);

  /* ---- Joripo 2.0's forms tree and Monitor (joripo-ui.css .fh-*) ------ */
  /* A workspace is a solid dark-green band with white words in both themes:
     the level above its amber groups and its form cards, on the light and
     the dark canvas alike. */
  --ws-band: #1F6B5B;
  --on-ws-band: #FFFFFF;
  --on-ws-band-2: rgba(255, 255, 255, .82);   /* its meta line and counts */
  --ws-band-hover: rgba(255, 255, 255, .14);  /* a control on the band, pointed at */
  --ws-band-chip: rgba(255, 255, 255, .18);   /* its icon tile and level chip */
  --ws-band-press: rgba(0, 0, 0, .12);        /* the band itself, pointed at (Monitor) */
  --hover-on-tint: rgba(255, 255, 255, .45);  /* a control on a tinted band (a group), pointed at */
  --hover-veil: rgba(16, 24, 32, .06);        /* a small handle pointed at, on any surface */
  /* The forms tree's containers on Collect, Monitor and Export (as the
     Design page draws them): a workspace's tinted area and its edge, the
     forms outside every workspace's grey area, a group's amber tint. Mixed
     from the themed colours, so both themes follow. */
  --tree-ws-bg: color-mix(in srgb, var(--brand-50) 42%, var(--surface));
  --tree-ws-line: color-mix(in srgb, var(--brand-100) 75%, var(--line));
  --tree-lib-bg: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  --tree-grp-bg: color-mix(in srgb, var(--accent-100) 28%, var(--surface));
  --tree-grp-line: color-mix(in srgb, var(--accent-100) 85%, var(--line));
  --switch-thumb: #FFFFFF;                    /* an on/off switch's knob: white in both themes */

  /* ---- the classic console's roles (joripo.css, joripo-classic.css) --- */
  --color-primary: var(--brand-600);   /* links, primary buttons, active navigation, modal heads */
  --color-primary-hover: var(--brand-700);
  --color-primary-active: var(--brand-800);
  --color-primary-border: var(--brand-600);
  --color-primary-tint: var(--brand-50);
  --color-primary-tint-2: var(--brand-100);   /* the [+] insertion bar */
  --color-primary-strip: var(--brand-500);    /* item-card stripe */
  --color-add: var(--brand-600);       /* add row: Start new form, Add group */
  --color-add-hover: var(--brand-700);
  --color-add-active: var(--brand-800);
  --color-add-adv: var(--ink-600);     /* add row: Upload, Add server dataset */
  --color-add-adv-hover: var(--ink-700);
  --color-add-adv-active: var(--ink-900);
  --color-secondary: var(--success-fill);     /* help boxes, More, success */
  --color-secondary-hover: var(--success-fill-hover);
  --color-secondary-ink: var(--success);
  --color-secondary-tint: var(--success-50);
  --color-secondary-border: var(--success-line);
  --color-brand: var(--brand-600);     /* Joripo's mark */
  --color-background: var(--canvas);   /* page, active tab */
  --color-shell: var(--surface);       /* header and tab band */
  --color-surface: var(--surface);
  --color-surface-muted: var(--surface-2);    /* box toolbar, card header */
  --color-surface-sub: #F6F7F4;        /* card sub-row */
  --color-surface-sunken: var(--surface-2);   /* panel headings, wells */
  --color-hover: var(--surface-3);     /* hovered buttons, tabs, header icons */
  --color-footer: var(--surface-3);
  --color-track: #E3E6E1;              /* meters, progress bars, chart rules */
  --color-border: #E3E6E1;
  --color-border-strong: #D3D8D2;
  --color-control-border: var(--control-line);
  --color-divider: #E3E6E1;
  --color-text: var(--ink-900);
  --color-text-secondary: var(--ink-700);
  --color-text-muted: var(--ink-600);
  --color-text-faint: var(--ink-400);  /* icons beside text, never prose */
  --color-text-on-primary: var(--on-brand);
  --color-text-on-danger: var(--on-danger);
  --color-input-disabled: #EEF0EC;
  --color-success: var(--color-secondary-ink);
  --color-success-bg: var(--color-secondary-tint);
  --color-success-border: var(--color-secondary-border);
  --color-warning: #B54708;
  --color-warning-bg: #FFFAEB;
  --color-warning-border: #FEDF89;
  --color-warning-solid: var(--accent-500);
  --color-text-on-warning: var(--on-accent);
  --color-danger: var(--danger);
  --color-danger-bg: var(--danger-50);
  --color-danger-border: var(--danger-line);
  --color-danger-solid: var(--danger-fill);   /* red Cancel, inline field errors */
  --color-danger-hover: var(--danger-fill-hover);
  --color-info: #175CD3;
  --color-info-bg: #EFF8FF;
  --color-strip-form: var(--color-primary-strip);
  --color-strip-dataset: var(--color-secondary);
  --color-strip-device: var(--ink-600);
  --color-switch-track: #D3D8D2;       /* SurveyCTO's YES/NO and ON/OFF pill */
  --color-switch-knob: var(--ink-700);
  --color-switch-on: var(--brand-100);
  --color-switch-on-ink: var(--brand-800);
  --color-scrim: rgba(16, 24, 32, .5);
  /* designer question-type families (bg / ink), Design view and preview */
  --qt-text-bg: #E8F3FA;     --qt-text-ink: #2B6CA3;
  --qt-num-bg: #E6F4EE;      --qt-num-ink: #256B4D;
  --qt-select-bg: #EEE9FA;   --qt-select-ink: #5B46B0;
  --qt-note-bg: #EEEEEE;     --qt-note-ink: #5C5C5C;
  --qt-calc-bg: #FCF3E3;     --qt-calc-ink: #765A2C;
  --qt-datetime-bg: #F0EAFB; --qt-datetime-ink: #6A4BB0;
  --qt-geo-bg: #E7F3EA;      --qt-geo-ink: #3C763D;
  --qt-media-bg: #FBEAF1;    --qt-media-ink: #A63B6B;
  --qt-meta-bg: #EDEDED;     --qt-meta-ink: #5F5F5F;
  --qt-group-bg: #EEF4F8;    --qt-group-ink: #2B6CA3;
  --qt-repeat-bg: #EAF1F7;   --qt-repeat-ink: #2B6CA3;

  /* ---- charts (daily submissions, Home's bars) ------------------------ */
  /* The series colours are also app/dashboard/daily_chart.PALETTE, which
     the PNG download keeps (a picture for a report is always light). */
  --chart-bg: var(--surface);
  --chart-grid: #E3E6E1;
  --chart-axis: var(--ink-400);
  --chart-label: var(--ink-600);
  --chart-legend: var(--ink-900);
  --chart-1: #1F6B5B; --chart-2: #C2410C; --chart-3: #175CD3; --chart-4: #B42318;
  --chart-5: #6941C6; --chart-6: #9A5B05; --chart-7: #0E7090; --chart-8: #C11574;
  --chart-9: #475467; --chart-10: #4D7C0F;
  /* Field monitoring's series (static/css/joripo-monitoring.css): the
     same hues in the same order, stepped so every slot clears the
     categorical checks (OKLCH lightness band, chroma floor, adjacent
     colour-blind and normal-vision separation, 3:1) in each theme --
     the dataviz validator, not by eye. And its heat-map ramp: one hue,
     light to dark, the faint end still 2:1 on the surface. */
  --jm-series-1: #0F7B5C; --jm-series-2: #C2410C; --jm-series-3: #175CD3;
  --jm-series-4: #B42318; --jm-series-5: #6941C6; --jm-series-6: #9A5B05;
  --jm-series-7: #0779A8; --jm-series-8: #C11574;
  --jm-heat-1: #7DBBA3; --jm-heat-2: #4E9F84; --jm-heat-3: #2A8570; --jm-heat-4: #1F6B5B;
  --jm-heat-5: #113F37;
  --jm-heat-ink-light: #0B1F1A; --jm-heat-ink-dark: #FFFFFF;

  /* ---- Form Designer and web form (tester.css) ------------------------ */
  /* The Test toolbar's orange and the Design toolbar's blue are the
     designer's own mode colours (docs/UX/SURVEYCTO_WORKFLOW_SPEC.md §4.13);
     their menus are written in ink, which reads on both. Links, buttons and
     chosen answers are Joripo's green. */
  --fd-orange: #F6851F;                /* Test toolbar, Test label, testing options */
  --fd-orange-dark: #BD5700;           /* switch track, inspector handle and title */
  --fd-orange-light: #FFB652;          /* switch knob, inspector panel */
  --fd-blue: #5AABF5;                  /* Design toolbar and knob */
  --fd-blue-dark: #005091;             /* Design switch track */
  --fd-on-mode: #1E2933;               /* menus on the orange and blue toolbars */
  --fd-mode-hover: rgba(255, 255, 255, .22);  /* a hovered menu on those toolbars */
  --fd-panel: #FFB652;                 /* the form inspector's panel (Test mode) */
  --fd-panel-ink: #1E2933;
  --fd-bar-light: #F9F9F9;             /* upper bar, idle mode handle */
  --fd-page: #F2F3F5;                  /* page behind the question cards */
  --fd-card: #FFFFFF;                  /* question cards, dialogs, menus */
  --fd-head: #FAFAFA;                  /* table heads, the instance view */
  --fd-hover: #F5F5F5;
  --fd-ink: #333333;
  --fd-ink-soft: #4D4D4D;
  --fd-muted: #6B6B6B;                 /* hints, notes, secondary lines */
  --fd-title: #626262;                 /* group / form title above the cards */
  --fd-card-line: #E8E8E8;
  --fd-input-line: var(--control-line);
  --fd-input-disabled: #EEEEEE;
  --fd-disabled: #8C8C8C;              /* a choice that cannot be made now */
  --fd-disabled-fill: #C7C8CA;         /* a button that cannot be pressed now */
  --fd-paper: #FFFFFF;                 /* a signature pad, a map pin's ring: white in both themes */
  --fd-choice: var(--control-line);    /* radio and checkbox, unselected */
  --fd-choice-on: var(--brand-600);    /* radio and checkbox, selected */
  --fd-choice-tint: var(--brand-50);   /* the current row in Go to and summaries */
  --fd-error: var(--danger-fill);      /* constraint message bar, input border */
  --fd-warn: #C2410C;                  /* orange words: required and unanswered in Go to, the Test label */
  --fd-warn-fill: #C2410C;             /* Close in Go to */
  --fd-warn-fill-hover: #9A3412;
  --fd-answered: var(--success);       /* answered question in Go to */
  --fd-primary: var(--brand-600);
  --fd-primary-line: var(--brand-700);
  --fd-modal-head: #434A54;
  --fd-on-dark: #FFFFFF;               /* text on the modal head and coloured buttons */
  --wf-page: #F6F6F6;                  /* the web form's page */
  --map-ground: #E8ECEE;               /* a map before its tiles arrive */
  --map-pin: #2A7DE1;
  --map-accuracy-fill: rgba(42, 125, 225, .15);
  --map-accuracy-line: rgba(42, 125, 225, .5);
  --map-chip: rgba(255, 255, 255, .85);       /* words over the map's (light) tiles */
  --map-chip-strong: rgba(255, 255, 255, .92);
  --map-chip-ink: #333333;
  --gps-halo: rgba(31, 107, 91, .25);
  --qr-ground: #FFFFFF;                /* a QR code stays dark on white: scanners need it */

  /* ---- Master Admin's navigation (joripo-admin.css) ------------------- */
  /* Dark in both themes, with "Master Admin" in amber, so nobody mistakes
     the server's control panel for an organisation's console; Joripo's mark
     sits on a light tile there, as on the brand sheet's app icon. */
  --ja-side-bg: #0F1F1B;
  --ja-side-edge: #0A1613;
  --ja-side-line: rgba(255, 255, 255, .08);
  --ja-side-ink: #C9D6D1;
  --ja-side-ink-2: #8EA39C;
  --ja-side-strong: #FFFFFF;
  --ja-side-hover: rgba(255, 255, 255, .06);
  --ja-side-active: rgba(79, 191, 159, .16);
  --ja-side-active-knock: #1D3A33;
  --ja-mark-tile: #FFFFFF;
  --ja-scrim: rgba(8, 16, 14, .5);
}

/* ---- dark ---------------------------------------------------------------- */
/* Same names, values for a dark room. Brand and status colours are lifted so
   they read as text on the dark surfaces; a brand fill is then light enough
   to carry dark text (--on-brand).
   On screen only: paper is white, so a page printed in the dark theme is
   printed with the light theme's inks (light text would vanish on it). */
@media not print {
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-50: #12332C; --brand-100: #17443A; --brand-200: #1F5C4E;
  --brand-500: #3FA98E; --brand-600: #4FBF9F; --brand-700: #74D1B5; --brand-800: #A5E3CF;
  --accent-100: #3A2A0E; --accent-700: #F7C26A;
  --on-brand: #0B1612;
  --ink-900: #E9EEF1; --ink-700: #CBD3D9; --ink-600: #A9B4BC; --ink-400: #8693A0; --ink-300: #5E6B76;
  --canvas: #0F1519; --surface: #161E23; --surface-2: #1C262C; --surface-3: #24303A;
  --line: #263239; --line-2: #33414A;
  --control-line: #6E7C87;
  --scrim: rgba(0, 0, 0, .62);
  --danger: #F97066; --danger-50: #2B1513; --danger-line: #5C2420;
  --danger-fill: #D92D20; --danger-fill-hover: #B42318;
  --warning: #FDB022; --warning-50: #2A2010; --warning-line: #5A4214;
  --success: #47CD89; --success-50: #0F2A1E; --success-line: #1E5C3E;
  --success-fill: #12774F; --success-fill-hover: #0E6142;
  --info: #84CAFF; --info-50: #102033; --info-line: #1E3F66;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 12px 32px -8px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-box: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-menu: 0 12px 32px -8px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-modal: 0 24px 48px -12px rgba(0, 0, 0, .7);
  --hover-on-tint: rgba(255, 255, 255, .08);
  --hover-veil: rgba(255, 255, 255, .08);
  --color-surface-sub: #1A2328;
  --color-track: #263239;
  --color-border: #263239;
  --color-border-strong: #33414A;
  --color-divider: #263239;
  --color-input-disabled: #1F2A30;
  --color-warning: #FDB022;
  --color-warning-bg: #2A2010;
  --color-warning-border: #5A4214;
  --color-info: #84CAFF;
  --color-info-bg: #102033;
  --color-switch-track: #33414A;
  --color-switch-knob: var(--ink-600);
  --color-switch-on: var(--brand-200);
  --color-switch-on-ink: var(--brand-800);
  --color-scrim: rgba(0, 0, 0, .62);
  --qt-text-bg: #132A3B;     --qt-text-ink: #8CC8F2;
  --qt-num-bg: #12302A;      --qt-num-ink: #7DD8B0;
  --qt-select-bg: #251F40;   --qt-select-ink: #C3B4F5;
  --qt-note-bg: #262C30;     --qt-note-ink: #C7CED3;
  --qt-calc-bg: #2E2614;     --qt-calc-ink: #E8C987;
  --qt-datetime-bg: #2A2140; --qt-datetime-ink: #CDB8F5;
  --qt-geo-bg: #17301D;      --qt-geo-ink: #9AD69B;
  --qt-media-bg: #3A1B2A;    --qt-media-ink: #F2A6C8;
  --qt-meta-bg: #262A2D;     --qt-meta-ink: #BFC6CB;
  --qt-group-bg: #172A38;    --qt-group-ink: #8CC8F2;
  --qt-repeat-bg: #18283A;   --qt-repeat-ink: #9CC9F0;
  --chart-grid: #263239;
  --chart-1: #4FBF9F; --chart-2: #FB923C; --chart-3: #84CAFF; --chart-4: #F97066;
  --chart-5: #B692F6; --chart-6: #FDB022; --chart-7: #67E3F9; --chart-8: #F670C7;
  --chart-9: #A9B4BC; --chart-10: #A6EF67;
  --jm-series-1: #2E9E7E; --jm-series-2: #E2702E; --jm-series-3: #4A8FE0;
  --jm-series-4: #E05A50; --jm-series-5: #9A7BE8; --jm-series-6: #BD820A;
  --jm-series-7: #2A95C8; --jm-series-8: #E0559A;
  --jm-heat-1: #1E5A4C; --jm-heat-2: #257563; --jm-heat-3: #2E9479; --jm-heat-4: #4FBF9F;
  --jm-heat-5: #A3E6CE;
  --jm-heat-ink-light: #FFFFFF; --jm-heat-ink-dark: #0B1F1A;
  --fd-bar-light: #1C262C;
  --fd-page: #0F1519;
  --fd-card: #161E23;
  --fd-head: #1C262C;
  --fd-hover: #24303A;
  --fd-ink: #E9EEF1;
  --fd-ink-soft: #C3CCD3;
  --fd-muted: #9AA6B0;
  --fd-title: #A9B4BC;
  --fd-card-line: #263239;
  --fd-input-disabled: #1F2A30;
  --fd-warn: #FB923C;
  --fd-modal-head: #2A363E;
  --fd-panel: #33220F;
  --fd-panel-ink: #FFD7A8;
  --fd-disabled: #6E7C87;
  --fd-disabled-fill: #33414A;
  --wf-page: #0F1519;
  --map-ground: #1C262C;
  --map-pin: #84CAFF;
  --gps-halo: rgba(79, 191, 159, .3);
}
}