/* findpostcode.com.au design tokens. Ported from www/style-guide/theme-preview/css/theme-preview.css
   (the approved, isolated design proof-of-concept - see that folder's README for the full rationale
   and the WCAG contrast measurements behind these values).

   Defines custom properties only - no selector here touches an existing rule in main.css. Loaded
   after main-min.css in html_head.ascx so theme-remap.css (loaded after this file) can reference
   these tokens and win on cascade order without !important. */

/* Layer 1 - palette. The only place in this file a colour literal appears. */
:root {
    --c-navy: #2f353e;
    --c-navy-dark: #1d2127;

    --c-orange: #dd480e;         /* exact brand orange - 4.19:1 on white */
    --c-orange-strong: #b03509;  /* 6.3:1 on white - safe for small text */
    --c-orange-deep: #922c07;
    --c-orange-light: #ff8a5c;   /* 7.8:1 on --c-dk-bg */
    --c-orange-lift: #ffa27c;
    --c-orange-tint: #fdf1ec;
    --c-orange-shade: #2a1d17;
    --c-orange-tint-deep: #f5c8b7;  /* one step darker than --c-orange-tint - 10.4:1 with --c-ink-900 */
    --c-orange-shade-deep: #42312d; /* dark-mode counterpart, mixed toward --c-orange-light */

    --c-white: #ffffff;
    --c-grey-50: #f5f6f8;
    --c-grey-200: #dfe3e8;
    --c-grey-500: #5a6472;       /* 6.0:1 on white */
    --c-ink-50: #f2f4f7;
    --c-ink-300: #c2c9d2;        /* 9.0:1 on --c-navy-dark */
    --c-ink-900: #1d2127;        /* 14.9:1 on white */

    --c-dk-bg: #14181d;
    --c-dk-surface: #1d2127;
    --c-dk-sunken: #191d23;
    --c-dk-border: #333b45;
    --c-dk-ink: #e8eaed;
    --c-dk-ink-muted: #a4aeba;   /* 7.0:1 on --c-dk-bg */

    --c-focus: #0b62d6;
    --c-focus-dk: #6fb0ff;
    --c-yellow: #ffd400;

    --shadow-lt: 0 1px 2px rgba(29, 33, 39, .06), 0 4px 16px rgba(29, 33, 39, .07);
    --shadow-lift-lt: 0 2px 4px rgba(29, 33, 39, .08), 0 12px 32px rgba(29, 33, 39, .13);
    --shadow-dk: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .4);
    --shadow-lift-dk: 0 2px 4px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .5);

    /* The footer and preview banner are dark in both modes, so these do not move. */
    --navy: var(--c-navy);
    --navy-dark: var(--c-navy-dark);
    --ink-on-dark: var(--c-ink-50);
    --ink-on-dark-muted: var(--c-ink-300);
    --focus-on-dark: var(--c-yellow);

    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4.5rem;

    --radius: 10px;
    --radius-lg: 16px;

    --measure: 68ch;
    --container: 74rem;

    /* Fluid type scale, from the theme preview. Not previously ported, which is why the new
       sections inherited main-min.css's heading sizes. */
    --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
    --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.13rem);
    --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
    --step-2:  clamp(1.45rem, 1.30rem + 0.75vw, 1.90rem);
    --step-3:  clamp(1.75rem, 1.50rem + 1.30vw, 2.60rem);
    --step-4:  clamp(2.10rem, 1.65rem + 2.30vw, 3.50rem);
}

/* Layer 2 - mapping. Dark is written twice because CSS cannot express "this media query OR this
   selector" in one rule; keep the two lists identical (see theme-preview README). */

:root {
    color-scheme: light;

    --bg: var(--c-white);
    --surface: var(--c-white);
    --surface-sunken: var(--c-grey-50);
    --border: var(--c-grey-200);
    --ink: var(--c-ink-900);
    --ink-muted: var(--c-grey-500);
    --accent: var(--c-orange);
    --accent-strong: var(--c-orange-strong);
    --accent-quiet: var(--c-orange-tint);
    --accent-quiet-deep: var(--c-orange-tint-deep);
    --focus: var(--c-focus);
    --shadow: var(--shadow-lt);
    --shadow-lift: var(--shadow-lift-lt);

    --logo-filter: none;
    --btn-primary-ink: var(--c-white);
    --btn-primary-hover-bg: var(--c-orange-deep);
    --client-blend: multiply;
    --client-plate-bg: transparent;
    --client-plate-pad: 0;
}

/* :not([data-theme="light"]) is load-bearing: without it, choosing Light on a dark OS does nothing. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --bg: var(--c-dk-bg);
        --surface: var(--c-dk-surface);
        --surface-sunken: var(--c-dk-sunken);
        --border: var(--c-dk-border);
        --ink: var(--c-dk-ink);
        --ink-muted: var(--c-dk-ink-muted);
        --accent: var(--c-orange-light);
        --accent-strong: var(--c-orange-light);
        --accent-quiet: var(--c-orange-shade);
        --accent-quiet-deep: var(--c-orange-shade-deep);
        --focus: var(--c-focus-dk);
        --shadow: var(--shadow-dk);
        --shadow-lift: var(--shadow-lift-dk);

        --logo-filter: brightness(0) invert(1) opacity(.92);
        --btn-primary-ink: var(--c-navy-dark);
        --btn-primary-hover-bg: var(--c-orange-lift);
        --client-blend: normal;
        --client-plate-bg: var(--c-white);
        --client-plate-pad: var(--sp-3);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: var(--c-dk-bg);
    --surface: var(--c-dk-surface);
    --surface-sunken: var(--c-dk-sunken);
    --border: var(--c-dk-border);
    --ink: var(--c-dk-ink);
    --ink-muted: var(--c-dk-ink-muted);
    --accent: var(--c-orange-light);
    --accent-strong: var(--c-orange-light);
    --accent-quiet: var(--c-orange-shade);
    --accent-quiet-deep: var(--c-orange-shade-deep);
    --focus: var(--c-focus-dk);
    --shadow: var(--shadow-dk);
    --shadow-lift: var(--shadow-lift-dk);

    --logo-filter: brightness(0) invert(1) opacity(.92);
    --btn-primary-ink: var(--c-navy-dark);
    --btn-primary-hover-bg: var(--c-orange-lift);
    --client-blend: normal;
    --client-plate-bg: var(--c-white);
    --client-plate-pad: var(--sp-3);
}