/* agusiQ light / dark theme
   Light theme = the original colours in index-*.css.
   Dark theme swaps the core colour tokens; illustrations keep their light look. */

/* Logo: show the right version for each theme */
.aq-logo-dark { display: none; }
.aq-logo-light { display: block; }
html[data-theme="dark"] .aq-logo-light { display: none; }
html[data-theme="dark"] .aq-logo-dark { display: block; }

html { color-scheme: light; }

/* Colour channels used for faded text and tints (works in browsers without color-mix) */
:root {
  --aq-ink-rgb: 0 0 0;
  --aq-paper-rgb: 255 255 255;
  --aq-azure-rgb: 88 166 255;
  --aq-crimson-rgb: 255 107 107;
  --aq-apricot-rgb: 255 237 213;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-apricot: #15120f;   /* page background */
  --color-paper:   #201c18;   /* cards and surfaces */
  --color-wash:    #2b2621;   /* hover surfaces */
  --color-ink:     #f4efe9;   /* main text */
  --color-mute:    #a8a097;   /* secondary text */
  --color-line:    #ffffff1f; /* borders */
  --color-azure:   #6cb2ff;
  --color-crimson: #ff7a7a;
  --color-neutral-800: #e6e0d9;
  --aq-ink-rgb: 244 239 233;
  --aq-paper-rgb: 32 28 24;
  --aq-azure-rgb: 108 178 255;
  --aq-crimson-rgb: 255 122 122;
  --aq-apricot-rgb: 21 18 15;
}

/* Page text, background and font set firmly so no host or browser default can override them */
html body {
  background-color: var(--color-apricot);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
}

/* Illustrations and product mock-ups keep their original light-theme colours */
html[data-theme="dark"] .\[container-type\:size\],
html[data-theme="dark"] .\[clip-path\:inset\(0_round_var\(--radius-card\)\)\],
html[data-theme="dark"] .bg-\[\#ffdcd2\],
html[data-theme="dark"] .bg-\[\#dcebff\],
html[data-theme="dark"] .from-\[\#dcebff\] {
  --color-apricot: #ffedd5;
  --color-paper: #fff;
  --color-wash: #fff;
  --color-ink: #000;
  --color-mute: #6b6b6b;
  --color-line: #0000001a;
  --color-azure: #58a6ff;
  --color-crimson: #ff6b6b;
  --color-neutral-800: oklch(26.9% 0 none);
  --aq-ink-rgb: 0 0 0;
  --aq-paper-rgb: 255 255 255;
  --aq-azure-rgb: 88 166 255;
  --aq-crimson-rgb: 255 107 107;
  --aq-apricot-rgb: 255 237 213;
}
/* Hero animation card keeps dark text on its white panel */
html[data-theme="dark"] .\[container-type\:size\] { color: var(--color-ink); }

/* Light illustration panels: dark text inside them */
html[data-theme="dark"] .bg-\[\#ffdcd2\],
html[data-theme="dark"] .bg-\[\#dcebff\],
html[data-theme="dark"] .from-\[\#dcebff\] { color: #000; }

/* Soften the light illustration panels slightly so they sit comfortably on a dark page */
html[data-theme="dark"] .bg-\[\#ffdcd2\],
html[data-theme="dark"] .bg-\[\#dcebff\],
html[data-theme="dark"] .from-\[\#dcebff\] { filter: brightness(0.92); }

/* "Proudly Australian" panel: warm dark gradient instead of the light peach one */
html[data-theme="dark"] .from-\[\#ffd6c9\] {
  background-image: linear-gradient(to bottom right, #3a2520, #2b2019 55%, #221c16) !important;
}

/* About page "A word from all of us" panel: deep blue instead of pale blue */
html[data-theme="dark"] .bg-\[\#e8f2ff\] { background-color: #16212f; }

/* Smooth colour change when switching */
html.aq-theme-anim, html.aq-theme-anim *, html.aq-theme-anim *::before, html.aq-theme-anim *::after {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.aq-theme-anim, html.aq-theme-anim * { transition: none !important; }
}

/* About page: Acknowledgement of Country with the Aboriginal flag */
.aq-flag-wrap { margin: 0 auto 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.aq-flag { display: block; width: 132px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px var(--color-line), 0 6px 18px rgb(0 0 0 / 0.12); }
.aq-flag-credit { font-size: 12px; line-height: 1.4; text-wrap: balance; max-width: 30ch; }
.aq-ack-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
@media (min-width: 768px) { .aq-flag { width: 156px; } }
html[data-theme="dark"] .aq-flag { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.22), 0 6px 18px rgb(0 0 0 / 0.4); }