/* Paradise Land Service — palette + type tokens.
 *
 * The one source of truth for both surfaces: the marketing pages <link> this
 * before styles.css, and the admin portal @imports it (admin-src/src/global.css),
 * which Vite inlines into the portal bundle. Add a token here rather than a raw
 * hex anywhere else — a colour defined twice is a palette forked. */

:root {
  --green-deep:  #16351f;
  --green-mid:   #3c6b2a;
  --green-hero:  #1d4a2c;
  --green-dark:  #0f2416;
  --ocean:       #1d5d7a;
  --ocean-ink:   #123b4d;
  --seafoam:     #adcdbe;
  --seafoam-rule:#8fb5a4;
  --coastal:     #b3d0da;
  --coastal-rule:#8fb6c2;
  --coastal-fill:#c4dbe3;
  --coastal-line:#7ba7b6;
  --card:        #dcdcd2;
  --card-hover:  #cdd6c8;
  --offwhite:    #fbfaf7;
  --header-bg:   rgba(242,242,234,.94);
  --header-rule: #dcdccf;
  --gold:        #e8b34a;
  --gold-bright: #f2c469;
  --gold-ink:    #7d5b0c;
  --ink-soft:    #4a5347;
  --ink-faint:   #6b7366;
  --mint:        #7fd0c8;
  --mint-light:  #a7e3dc;
  --field-rule:  #d8d5c9;
  --field-bg:    #fff;
  --placeholder: #6e7669; /* 4.6:1 on white — the previous #8a9285 was 3.2:1 and failed WCAG 1.4.3 */
  /* Status colours, chosen by Dirk: one meaning each, on both surfaces. All
     three clear WCAG AA's 4.5:1 as text, on --offwhite / an open task's tint:
     success 5.43 / 5.01, warn 4.92 / 4.55, error 7.46 / 6.89. Keep it that
     way — any text colour on a public page must, and warn is already as light
     as an orange can be and still pass on the tint (a brighter #e27100 was
     3.05:1). Offwhite text on error passes too (7.46). */
  --success:     #227700;
  --warn:        #ac5600;
  --error:       #a31900;
  /* Paper: a printed form is black on white whatever the palette (the
     portal's printed Paylocity form). */
  --print-ink:   #000;
  /* Route sheets (PrintRoutes.module.css): softer type, a column rule, the
     hairline between stops, and the meal break's band. */
  --print-soft:  #45453f;
  --print-rule:  #b9b9b3;
  --print-hair:  #cfcfca;
  --print-band:  #e9efe6;

  /* Roles. The hues above are the brand and never change; these say what a
     colour is *for*, so the portal's dark theme (below) can swap them without
     touching a button or the header. --green-deep is both the text and the
     primary fill, and --offwhite both the page and the text on that fill —
     in the dark they part ways, hence --text / --fill and --surface. Text on
     a brand fill (the header, a button, a pill) stays --offwhite or
     --green-deep. In the light they are exactly the hues they name, so the
     marketing page, which never sets a theme, is unchanged. */
  --surface:     var(--offwhite);    /* the page, cards, pop-overs */
  --text:        var(--green-deep);  /* body text and values */
  --fill:        var(--green-deep);  /* a primary button, a pressed toggle */
  --fill-hover:  var(--green-mid);
  --accent:      var(--green-mid);   /* hover text, a hovered or focused edge */
  --link:        var(--ocean);
  --highlight:   var(--seafoam);     /* mixed into --surface for a tint */
  --on-status:   var(--offwhite);    /* text on a --success/--warn/--error fill */

  --display: 'Barlow Condensed', Helvetica, sans-serif;
  --body:    'Barlow', Helvetica, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --wrap: 1200px;
  --gutter: 28px;
}

/* The portal's dark theme. admin-src/public/theme.js sets data-theme on
 * <html> before first paint, from the viewer's choice or their device; the
 * marketing page never loads it, so never goes dark. Screen only: paper is
 * light whatever the screen was. Brand hues stay put — the header is the same
 * green in both — and only the roles and the single-role tokens (ink, rules,
 * status) change. Every text pairing clears WCAG AA, as the light ones do:
 * --text 14.3:1 on --surface, --ink-faint 6.0, --placeholder 5.2 on
 * --field-bg, status 8.0–9.4 as text and 8.0–9.4 under --on-status, a
 * --highlight mention 6.9, --offwhite on --fill 6.0 / --fill-hover 4.9. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark; /* the browser's own parts: scrollbars, date pickers, checkboxes */
    --surface:     #0f1a13;
    --text:        #e3e8de;
    --fill:        var(--green-mid);
    --fill-hover:  #477a33;
    --accent:      #93c87f;
    --link:        #7cc0dc;
    --highlight:   #46705f;
    --on-status:   #0f1a13;
    --ink-soft:    #b2bcad;
    --ink-faint:   #8f998b;
    --placeholder: #8a9486;
    --card:        #3a4c40;
    --field-rule:  #415347;
    --field-bg:    #15221a;
    --success:     #82cf61;
    --warn:        #eda15a;
    --error:       #ff8f75;
  }
}