/* =====================================================================
   Jobs for All: colours, light and dark theme, and text size.
   The public site and the admin portal both load this file first, so
   they always look the same.

   How it works
   - Every colour in the pages is a named "slot" such as --paper (page
     background), --white (cards and inputs), --ink (main text).
     The light theme gives each slot its normal value. The dark theme
     gives the same slot a dark-theme value, so a card that is white in
     the light theme turns dark, and dark text turns light.
   - The dark colours sit inside @media screen, so printing is always
     light and ink-friendly.
   - Text size: every font size in the pages is written as
     calc(Npx * var(--fs, 1)). theme.js sets data-fs (0 to 4) on <html>
     and this file turns that number into the --fs multiplier.
   You normally never edit this file.
   ===================================================================== */

:root{
  color-scheme: light;

  /* text */
  --ink:#1C2B45;            /* main text */
  --ink-soft:#5E677B;       /* secondary text */
  --text-body:#39445A;      /* long reading text */

  /* surfaces */
  --paper:#FAF7F0;          /* page background */
  --paper-2:#F2ECDD;        /* quiet blocks, tags, separators */
  --white:#FFFFFF;          /* cards, inputs, panels */
  --line:#E7DFCC;           /* borders */
  --line-strong:#CFC4AB;    /* hover borders */

  /* brand colours. --green/--indigo/--clay/--amber are solid colours that carry white
     text (buttons). The -fg versions are for coloured text and icons on light surfaces. */
  --gold:#E8A33D;
  --green:#2F7A4C;  --green-fg:#2F7A4C;  --green-tint:#EAF3ED;
  --indigo:#3454A7; --indigo-fg:#3454A7; --indigo-tint:#EBEFF7;
  --clay:#C23616;   --clay-fg:#C23616;   --clay-tint:#FBECE7;
  --amber:#9A6A14;  --amber-fg:#905F0F;  --amber-tint:#FBF3E3;
  --violet-fg:#5B3E96; --violet-tint:#EFEAF8;

  /* dark bars, strong buttons, messages */
  --chrome:#1C2B45;         /* top bar, hero, bottom tab bar */
  --backdrop:#1C2B45;       /* behind the page on wide screens */
  --btn:#1C2B45;            /* strong buttons and selected chips */
  --on-btn:#FFFFFF;         /* text on those */
  --toast-bg:#1C2B45;
  --scrim:rgba(28,43,69,.55);

  /* chart colours (checked with the data-visualisation validator, in light and dark) */
  --chart-1:#3454A7;
  --chart-2:#E8A33D;
  --chart-ctx:#868FA3;       /* the quiet comparison line or bar, for example the whole site */

  /* text size multiplier */
  --fs:1;
}

@media screen{
  :root[data-theme="dark"]{
    color-scheme: dark;       /* date pickers, drop-down lists and scroll bars turn dark too */

    --ink:#EDE9DD;
    --ink-soft:#A9B3C7;
    --text-body:#D3D8E4;

    --paper:#0E1522;
    --paper-2:#1F2B3F;
    --white:#16202F;
    --line:#2D3B54;
    --line-strong:#455672;

    --gold:#E8A33D;
    --green:#2C7A4B;  --green-fg:#7FD6A0;  --green-tint:#13301F;
    --indigo:#4466C6; --indigo-fg:#9DB4F2; --indigo-tint:#192541;
    --clay:#C9401D;   --clay-fg:#FF9E80;   --clay-tint:#3B1A13;
    --amber:#9A6A14;  --amber-fg:#F2BE62;  --amber-tint:#33260E;
    --violet-fg:#C3AEF5; --violet-tint:#261E3F;

    --chrome:#172540;
    --backdrop:#060A12;
    --btn:#EDE9DD;
    --on-btn:#0E1522;
    --toast-bg:#2C3C5A;
    --scrim:rgba(0,0,0,.68);

    --chart-1:#6A86E3;
    --chart-2:#C98500;
    --chart-ctx:#7A869C;
  }
  /* pictures drawn for a light page sit on a light tile in the dark theme */
  :root[data-theme="dark"] img.siehdi-logo,
  :root[data-theme="dark"] .logo-tile{background:#fff; border-radius:8px;}
  :root[data-theme="dark"] img.siehdi-logo{padding:6px 10px; height:38px !important;}
}

/* text size steps (the A- and A+ buttons): 88%, 100%, 115%, 130%, 150% */
:root[data-fs="0"]{--fs:.88;}
:root[data-fs="2"]{--fs:1.15;}
:root[data-fs="3"]{--fs:1.3;}
:root[data-fs="4"]{--fs:1.5;}
@media print{ :root, :root[data-fs]{--fs:1 !important;} }

::placeholder{color:var(--ink-soft); opacity:.85;}

.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* ---------------------------------------------------------------------
   The display buttons (dark or light theme, smaller text, larger text).
   They sit on the dark top bar in both themes, so they are drawn for a
   dark bar, and their own size never changes with the text size setting
   so they always stay easy to reach.
   --------------------------------------------------------------------- */
.display-ctl{display:inline-flex; align-items:center; gap:6px; flex:none;}
.display-ctl .dc-btn{display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:38px; height:32px; padding:0 10px; margin:0; border-radius:16px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#fff; font-family:'Space Grotesk', system-ui, sans-serif; font-size:13px; font-weight:600; line-height:1; letter-spacing:0; text-transform:none; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.display-ctl .dc-btn:hover{background:rgba(255,255,255,.2);}
.display-ctl .dc-btn[aria-disabled="true"]{opacity:.38; cursor:default;}
.display-ctl .dc-btn[aria-disabled="true"]:hover{background:rgba(255,255,255,.1);}
.display-ctl svg{width:17px; height:17px; flex:none;}
.display-ctl .dc-a-sm{font-size:12px;}
.display-ctl .dc-a-lg{font-size:17px;}
.display-ctl .dc-pm{font-size:13px; margin-left:-1px;}
.display-ctl .dc-word{display:none; font-size:12px;}
@media (min-width:430px){ .display-ctl .dc-word{display:inline;} }
@media print{ .display-ctl{display:none !important;} }