/* The website's design tokens, from the brand kit's website versions (colour v1.3, type v1.0, layout v1.0). Edit here:
   the kit's later v2.2 tokens are for apps (rounder corners, links underlined only in running text), so they aren't synced. */

/* ---- 11_Colour-System/Connacht-Agri_Colour-Tokens.css ---- */
/* Connacht Agri colour tokens v1.3. Primitives (raw palette) + semantic roles (light & dark). */
:root {
  /* Primitives */
  --ca-forest-50: #EFFAF2;
  --ca-forest-100: #DEF3E4;
  --ca-forest-200: #BDE4CA;
  --ca-forest-300: #94CDA7;
  --ca-forest-400: #62AB7D;
  --ca-forest-450: #50986B;
  --ca-forest-500: #3D865A;
  --ca-forest-600: #266741;
  --ca-forest-700: #154F2F;
  --ca-forest-800: #0B4225;
  --ca-forest-900: #05381E;
  --ca-forest-950: #032110;
  --ca-gold-50: #FDF6E8;
  --ca-gold-100: #FBEBCB;
  --ca-gold-200: #F7D695;
  --ca-gold-300: #E7B551;
  --ca-gold-400: #D09934;
  --ca-gold-500: #B17A21;
  --ca-gold-600: #996516;
  --ca-gold-700: #7F5314;
  --ca-gold-800: #623F14;
  --ca-gold-900: #462D11;
  --ca-neutral-0: #FFFFFF;
  --ca-neutral-50: #FBFAF6;
  --ca-neutral-100: #EFF1EC;
  --ca-neutral-200: #E0E2DC;
  --ca-neutral-300: #C8CCC5;
  --ca-neutral-400: #9BA099;
  --ca-neutral-500: #757D75;
  --ca-neutral-600: #586059;
  --ca-neutral-700: #404741;
  --ca-neutral-800: #2A302B;
  --ca-neutral-900: #1E231F;
  --ca-neutral-950: #131714;
  --ca-charcoal-50: #F7F7F7;
  --ca-charcoal-100: #E6E6E6;
  --ca-charcoal-200: #D4D4D4;
  --ca-charcoal-300: #B7B7B7;
  --ca-charcoal-400: #929292;
  --ca-charcoal-500: #747474;
  --ca-charcoal-600: #585858;
  --ca-charcoal-700: #3D3D3D;
  --ca-charcoal-800: #2E2E2E;
  --ca-charcoal-850: #252525;
  --ca-charcoal-900: #1C1C1C;
  --ca-charcoal-950: #121212;
  --ca-red-50: #FFF0EE;
  --ca-red-100: #FFDDD8;
  --ca-red-300: #FDA297;
  --ca-red-600: #BA2B28;
  --ca-red-700: #981919;
  --ca-green-50: #ECF9EE;
  --ca-green-100: #D4F1D8;
  --ca-green-300: #89D298;
  --ca-green-600: #298646;
  --ca-green-700: #186C35;
  --ca-orange-50: #FFF2E8;
  --ca-orange-100: #FFE2CA;
  --ca-orange-300: #F2AD73;
  --ca-orange-600: #C66C00;
  --ca-orange-700: #A65700;
  --ca-blue-50: #EBF7FF;
  --ca-blue-100: #D2EBFF;
  --ca-blue-300: #86C3FF;
  --ca-blue-600: #1666AA;
  --ca-blue-700: #034F8A;

  /* Semantic: light (default) */
  --ca-bg-page: var(--ca-neutral-50);
  --ca-bg-surface: var(--ca-neutral-0);
  --ca-bg-subtle: var(--ca-neutral-100);
  --ca-bg-brand: var(--ca-forest-900);
  --ca-bg-brand-subtle: var(--ca-forest-50);
  --ca-bg-accent-subtle: var(--ca-gold-50);
  --ca-text-primary: var(--ca-neutral-950);
  --ca-text-heading: var(--ca-neutral-950);
  --ca-text-secondary: var(--ca-neutral-600);
  --ca-text-disabled: var(--ca-neutral-400);
  --ca-text-on-brand: var(--ca-neutral-50);
  --ca-text-accent-on-brand: var(--ca-gold-300);
  --ca-text-link: var(--ca-forest-700);
  --ca-text-link-hover: var(--ca-forest-900);
  --ca-text-gold: var(--ca-gold-700);
  --ca-border-default: var(--ca-neutral-300);
  --ca-border-strong: var(--ca-neutral-500);
  --ca-border-brand: var(--ca-forest-900);
  --ca-border-focus: var(--ca-forest-900);
  --ca-border-focus-halo: var(--ca-gold-300);
  --ca-action-primary-bg: var(--ca-forest-900);
  --ca-action-primary-bg-hover: var(--ca-forest-700);
  --ca-action-primary-text: var(--ca-neutral-50);
  --ca-action-secondary-bg: var(--ca-neutral-0);
  --ca-action-secondary-border: var(--ca-forest-900);
  --ca-action-secondary-text: var(--ca-forest-900);
  --ca-action-secondary-bg-hover: var(--ca-forest-50);
  --ca-action-accent-bg: var(--ca-gold-300);
  --ca-action-accent-bg-hover: var(--ca-gold-200);
  --ca-action-accent-text: var(--ca-forest-900);
  --ca-action-accent-border: var(--ca-gold-600);
  --ca-decor-gold: var(--ca-gold-400);
  --ca-decor-rule: var(--ca-gold-400);
  --ca-icon-brand: var(--ca-forest-900);
  --ca-icon-accent: var(--ca-gold-600);
  --ca-status-error-text: var(--ca-red-600);
  --ca-status-error-bg: var(--ca-red-50);
  --ca-status-error-border: var(--ca-red-600);
  --ca-status-error-icon: var(--ca-red-600);
  --ca-status-success-text: var(--ca-green-700);
  --ca-status-success-bg: var(--ca-green-50);
  --ca-status-success-border: var(--ca-green-600);
  --ca-status-success-icon: var(--ca-green-600);
  --ca-status-warning-text: var(--ca-neutral-950);
  --ca-status-warning-bg: var(--ca-orange-50);
  --ca-status-warning-border: var(--ca-orange-600);
  --ca-status-warning-icon: var(--ca-orange-600);
  --ca-status-info-text: var(--ca-blue-600);
  --ca-status-info-bg: var(--ca-blue-50);
  --ca-status-info-border: var(--ca-blue-600);
  --ca-status-info-icon: var(--ca-blue-600);
  color-scheme: light;
}

/* Dark mode: follows the device unless the site sets data-theme="light" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ca-bg-page: var(--ca-charcoal-950);
    --ca-bg-surface: var(--ca-charcoal-900);
    --ca-bg-subtle: var(--ca-charcoal-850);
    --ca-bg-brand: var(--ca-forest-900);
    --ca-bg-brand-subtle: var(--ca-forest-800);
    --ca-bg-accent-subtle: var(--ca-gold-900);
    --ca-text-primary: var(--ca-charcoal-100);
    --ca-text-heading: var(--ca-neutral-50);
    --ca-text-secondary: var(--ca-charcoal-300);
    --ca-text-disabled: var(--ca-charcoal-500);
    --ca-text-on-brand: var(--ca-neutral-50);
    --ca-text-accent-on-brand: var(--ca-gold-300);
    --ca-text-link: var(--ca-forest-300);
    --ca-text-link-hover: var(--ca-forest-200);
    --ca-text-gold: var(--ca-gold-300);
    --ca-border-default: var(--ca-charcoal-700);
    --ca-border-strong: var(--ca-charcoal-400);
    --ca-border-brand: var(--ca-forest-400);
    --ca-border-focus: var(--ca-gold-300);
    --ca-border-focus-halo: var(--ca-charcoal-950);
    --ca-action-primary-bg: var(--ca-forest-450);
    --ca-action-primary-bg-hover: var(--ca-forest-400);
    --ca-action-primary-text: var(--ca-forest-950);
    --ca-action-secondary-bg: var(--ca-charcoal-950);
    --ca-action-secondary-border: var(--ca-charcoal-100);
    --ca-action-secondary-text: var(--ca-charcoal-100);
    --ca-action-secondary-bg-hover: var(--ca-charcoal-850);
    --ca-action-accent-bg: var(--ca-gold-300);
    --ca-action-accent-bg-hover: var(--ca-gold-200);
    --ca-action-accent-text: var(--ca-forest-950);
    --ca-action-accent-border: var(--ca-gold-300);
    --ca-decor-gold: var(--ca-gold-300);
    --ca-decor-rule: var(--ca-gold-300);
    --ca-icon-brand: var(--ca-forest-300);
    --ca-icon-accent: var(--ca-gold-300);
    --ca-status-error-text: var(--ca-red-300);
    --ca-status-error-bg: #341916;
    --ca-status-error-border: var(--ca-red-300);
    --ca-status-error-icon: var(--ca-red-300);
    --ca-status-success-text: var(--ca-green-300);
    --ca-status-success-bg: #132717;
    --ca-status-success-border: var(--ca-green-300);
    --ca-status-success-icon: var(--ca-green-300);
    --ca-status-warning-text: var(--ca-orange-300);
    --ca-status-warning-bg: #311E0E;
    --ca-status-warning-border: var(--ca-orange-300);
    --ca-status-warning-icon: var(--ca-orange-300);
    --ca-status-info-text: var(--ca-blue-300);
    --ca-status-info-bg: #122334;
    --ca-status-info-border: var(--ca-blue-300);
    --ca-status-info-icon: var(--ca-blue-300);
    color-scheme: dark;
  }
}
/* Dark mode: forced by the site */
:root[data-theme="dark"] {
  --ca-bg-page: var(--ca-charcoal-950);
  --ca-bg-surface: var(--ca-charcoal-900);
  --ca-bg-subtle: var(--ca-charcoal-850);
  --ca-bg-brand: var(--ca-forest-900);
  --ca-bg-brand-subtle: var(--ca-forest-800);
  --ca-bg-accent-subtle: var(--ca-gold-900);
  --ca-text-primary: var(--ca-charcoal-100);
  --ca-text-heading: var(--ca-neutral-50);
  --ca-text-secondary: var(--ca-charcoal-300);
  --ca-text-disabled: var(--ca-charcoal-500);
  --ca-text-on-brand: var(--ca-neutral-50);
  --ca-text-accent-on-brand: var(--ca-gold-300);
  --ca-text-link: var(--ca-forest-300);
  --ca-text-link-hover: var(--ca-forest-200);
  --ca-text-gold: var(--ca-gold-300);
  --ca-border-default: var(--ca-charcoal-700);
  --ca-border-strong: var(--ca-charcoal-400);
  --ca-border-brand: var(--ca-forest-400);
  --ca-border-focus: var(--ca-gold-300);
  --ca-border-focus-halo: var(--ca-charcoal-950);
  --ca-action-primary-bg: var(--ca-forest-450);
  --ca-action-primary-bg-hover: var(--ca-forest-400);
  --ca-action-primary-text: var(--ca-forest-950);
  --ca-action-secondary-bg: var(--ca-charcoal-950);
  --ca-action-secondary-border: var(--ca-charcoal-100);
  --ca-action-secondary-text: var(--ca-charcoal-100);
  --ca-action-secondary-bg-hover: var(--ca-charcoal-850);
  --ca-action-accent-bg: var(--ca-gold-300);
  --ca-action-accent-bg-hover: var(--ca-gold-200);
  --ca-action-accent-text: var(--ca-forest-950);
  --ca-action-accent-border: var(--ca-gold-300);
  --ca-decor-gold: var(--ca-gold-300);
  --ca-decor-rule: var(--ca-gold-300);
  --ca-icon-brand: var(--ca-forest-300);
  --ca-icon-accent: var(--ca-gold-300);
  --ca-status-error-text: var(--ca-red-300);
  --ca-status-error-bg: #341916;
  --ca-status-error-border: var(--ca-red-300);
  --ca-status-error-icon: var(--ca-red-300);
  --ca-status-success-text: var(--ca-green-300);
  --ca-status-success-bg: #132717;
  --ca-status-success-border: var(--ca-green-300);
  --ca-status-success-icon: var(--ca-green-300);
  --ca-status-warning-text: var(--ca-orange-300);
  --ca-status-warning-bg: #311E0E;
  --ca-status-warning-border: var(--ca-orange-300);
  --ca-status-warning-icon: var(--ca-orange-300);
  --ca-status-info-text: var(--ca-blue-300);
  --ca-status-info-bg: #122334;
  --ca-status-info-border: var(--ca-blue-300);
  --ca-status-info-icon: var(--ca-blue-300);
  color-scheme: dark;
}

/* Keyboard focus: two-tone ring, works on every background (same principle as GOV.UK's yellow + black).
   Inner ring (halo) separates the ring from the element; outer ring carries the contrast against the background.
   Light: Wheat inner + Forest outer.  Dark: charcoal inner + Wheat outer.  Never remove it. */
:where(:focus-visible) {
  outline: 2px solid var(--ca-border-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ca-border-focus-halo);
}

/* Links: always underlined. The link colour is only 1.5-1.9:1 different from body text, so colour alone
   would not show which words are links (WCAG 1.4.1). */
:where(a) { color: var(--ca-text-link); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
:where(a:hover) { color: var(--ca-text-link-hover); text-decoration-thickness: 2px; }

/* ---- 12_Typography/Connacht-Agri_Type-Tokens.css ---- */
/* Connacht Agri type tokens v1.0: Outfit (headings) + Source Sans 3 (body). Sizes in rem, so they respect the reader's browser text size. */
/* Self-hosted fonts: upload the web-fonts folder next to this file. Do NOT load these from fonts.googleapis.com
   (EU visitors' IP addresses would be sent to Google; a German court fined a site for exactly this in 2022). */
@font-face { font-family: 'Outfit'; src: url('../fonts/Outfit-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/SourceSans3VF-Upright.ttf.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/SourceSans3VF-Italic.ttf.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; }
/* Metric-matched Arial fallbacks: text doesn't jump when the brand fonts finish loading */
@font-face { font-family: 'Source Sans 3 Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'); size-adjust: 94.7%; ascent-override: 108.1%; descent-override: 42.2%; line-gap-override: 0%; }
@font-face { font-family: 'Outfit Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'); font-weight: 700; size-adjust: 95.8%; ascent-override: 104.4%; descent-override: 27.1%; line-gap-override: 0%; }

:root {
  --ca-font-heading: 'Outfit', 'Outfit Fallback', 'Segoe UI', Arial, sans-serif;
  --ca-font-body: 'Source Sans 3', 'Source Sans 3 Fallback', 'Segoe UI', Arial, sans-serif;
  --ca-measure: 68ch; /* max line length for paragraphs */

  --ca-text-display: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
  --ca-text-display-line-height: 1.05;
  --ca-text-display-weight: 700;
  --ca-text-display-tracking: -0.01em;
  --ca-text-h1: clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem);
  --ca-text-h1-line-height: 1.1;
  --ca-text-h1-weight: 700;
  --ca-text-h1-tracking: -0.005em;
  --ca-text-h2: clamp(1.5rem, 1.35rem + 0.6vw, 2rem);
  --ca-text-h2-line-height: 1.15;
  --ca-text-h2-weight: 700;
  --ca-text-h2-tracking: 0;
  --ca-text-h3: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem);
  --ca-text-h3-line-height: 1.2;
  --ca-text-h3-weight: 600;
  --ca-text-h3-tracking: 0;
  --ca-text-h4: 1.125rem;
  --ca-text-h4-line-height: 1.3;
  --ca-text-h4-weight: 600;
  --ca-text-h4-tracking: 0;
  --ca-text-label: 0.8125rem;
  --ca-text-label-line-height: 1.3;
  --ca-text-label-weight: 600;
  --ca-text-label-tracking: 0.08em;
  --ca-text-body-lg: 1.1875rem;
  --ca-text-body-lg-line-height: 1.55;
  --ca-text-body-lg-weight: 400;
  --ca-text-body-lg-tracking: 0;
  --ca-text-body: 1.0625rem;
  --ca-text-body-line-height: 1.55;
  --ca-text-body-weight: 400;
  --ca-text-body-tracking: 0;
  --ca-text-small: 0.9375rem;
  --ca-text-small-line-height: 1.5;
  --ca-text-small-weight: 400;
  --ca-text-small-tracking: 0;
  --ca-text-caption: 0.8125rem;
  --ca-text-caption-line-height: 1.45;
  --ca-text-caption-weight: 400;
  --ca-text-caption-tracking: 0.005em;
}

/* Base styles. :where() keeps specificity at zero so frameworks and components override them cleanly. */
:where(body) { font-family: var(--ca-font-body); font-size: var(--ca-text-body); line-height: var(--ca-text-body-line-height); font-weight: 400; color: var(--ca-text-primary, #131714); font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
:where(h1) { font-family: var(--ca-font-heading); font-size: var(--ca-text-h1); line-height: var(--ca-text-h1-line-height); font-weight: var(--ca-text-h1-weight); letter-spacing: var(--ca-text-h1-tracking); color: var(--ca-text-heading, inherit); text-wrap: balance; }
:where(h2) { font-family: var(--ca-font-heading); font-size: var(--ca-text-h2); line-height: var(--ca-text-h2-line-height); font-weight: var(--ca-text-h2-weight); letter-spacing: var(--ca-text-h2-tracking); color: var(--ca-text-heading, inherit); text-wrap: balance; }
:where(h3) { font-family: var(--ca-font-heading); font-size: var(--ca-text-h3); line-height: var(--ca-text-h3-line-height); font-weight: var(--ca-text-h3-weight); letter-spacing: var(--ca-text-h3-tracking); color: var(--ca-text-heading, inherit); text-wrap: balance; }
:where(h4) { font-family: var(--ca-font-heading); font-size: var(--ca-text-h4); line-height: var(--ca-text-h4-line-height); font-weight: var(--ca-text-h4-weight); letter-spacing: var(--ca-text-h4-tracking); color: var(--ca-text-heading, inherit); text-wrap: balance; }
:where(p, li) { max-width: var(--ca-measure); text-wrap: pretty; }
:where(small) { font-size: var(--ca-text-small); line-height: var(--ca-text-small-line-height); }
:where(table, .ca-price) { font-variant-numeric: tabular-nums lining-nums; }
.ca-display { font-family: var(--ca-font-heading); font-size: var(--ca-text-display); line-height: var(--ca-text-display-line-height); font-weight: var(--ca-text-display-weight); letter-spacing: var(--ca-text-display-tracking); }
.ca-h1 { font-family: var(--ca-font-heading); font-size: var(--ca-text-h1); line-height: var(--ca-text-h1-line-height); font-weight: var(--ca-text-h1-weight); letter-spacing: var(--ca-text-h1-tracking); }
.ca-h2 { font-family: var(--ca-font-heading); font-size: var(--ca-text-h2); line-height: var(--ca-text-h2-line-height); font-weight: var(--ca-text-h2-weight); letter-spacing: var(--ca-text-h2-tracking); }
.ca-h3 { font-family: var(--ca-font-heading); font-size: var(--ca-text-h3); line-height: var(--ca-text-h3-line-height); font-weight: var(--ca-text-h3-weight); letter-spacing: var(--ca-text-h3-tracking); }
.ca-h4 { font-family: var(--ca-font-heading); font-size: var(--ca-text-h4); line-height: var(--ca-text-h4-line-height); font-weight: var(--ca-text-h4-weight); letter-spacing: var(--ca-text-h4-tracking); }
.ca-label { font-family: var(--ca-font-heading); font-size: var(--ca-text-label); line-height: var(--ca-text-label-line-height); font-weight: var(--ca-text-label-weight); letter-spacing: var(--ca-text-label-tracking); text-transform: uppercase; }
.ca-body-lg { font-family: var(--ca-font-body); font-size: var(--ca-text-body-lg); line-height: var(--ca-text-body-lg-line-height); font-weight: var(--ca-text-body-lg-weight); letter-spacing: var(--ca-text-body-lg-tracking); }
.ca-body { font-family: var(--ca-font-body); font-size: var(--ca-text-body); line-height: var(--ca-text-body-line-height); font-weight: var(--ca-text-body-weight); letter-spacing: var(--ca-text-body-tracking); }
.ca-small { font-family: var(--ca-font-body); font-size: var(--ca-text-small); line-height: var(--ca-text-small-line-height); font-weight: var(--ca-text-small-weight); letter-spacing: var(--ca-text-small-tracking); }
.ca-caption { font-family: var(--ca-font-body); font-size: var(--ca-text-caption); line-height: var(--ca-text-caption-line-height); font-weight: var(--ca-text-caption-weight); letter-spacing: var(--ca-text-caption-tracking); }

/* ---- 13_Layout-Spacing/Connacht-Agri_Layout-Tokens.css ---- */
/* Connacht Agri layout tokens v1.0: spacing, sizes, corners, borders, shadows, breakpoints, motion. */
:root {
  /* Spacing: 4px base, mostly multiples of 8 */
  --ca-space-0: 0;
  --ca-space-0-5: 2px;
  --ca-space-1: 4px;
  --ca-space-2: 8px;
  --ca-space-3: 12px;
  --ca-space-4: 16px;
  --ca-space-5: 20px;
  --ca-space-6: 24px;
  --ca-space-8: 32px;
  --ca-space-10: 40px;
  --ca-space-12: 48px;
  --ca-space-16: 64px;
  --ca-space-20: 80px;
  --ca-space-24: 96px;
  --ca-space-32: 128px;

  /* Sizes */
  --ca-size-target-min: 44px; /* Smallest tap/click area for any control (Apple 44pt; WCAG AAA 44px) */
  --ca-size-control: 48px; /* Default height: buttons, inputs, selects (meets Material 48dp) */
  --ca-size-control-sm: 36px; /* Compact controls on desktop only; keep 24px clear space around them (WCAG 2.2 AA 2.5.8) */
  --ca-size-icon-sm: 16px; /* Inline icons next to small text */
  --ca-size-icon: 20px; /* Default icons in buttons and lists */
  --ca-size-icon-lg: 24px; /* Standalone icons */

  /* Corner radius: small radii echo the hard angles of the CA mark */
  --ca-radius-none: 0;
  --ca-radius-sm: 2px;
  --ca-radius-md: 4px;
  --ca-radius-lg: 8px;
  --ca-radius-xl: 12px;
  --ca-radius-full: 9999px;

  /* Borders */
  --ca-border-width-thin: 1px;
  --ca-border-width-control: 1.5px;
  --ca-border-width-focus: 2px;
  --ca-border-width-accent: 4px;

  /* Elevation (light mode: soft Ink-tinted shadows) */
  --ca-shadow-1: 0 1px 2px rgb(19 23 20 / 0.06), 0 1px 1px rgb(19 23 20 / 0.04);
  --ca-shadow-2: 0 4px 12px rgb(19 23 20 / 0.08), 0 1px 3px rgb(19 23 20 / 0.06);
  --ca-shadow-3: 0 12px 32px rgb(19 23 20 / 0.12), 0 2px 6px rgb(19 23 20 / 0.08);

  /* Layout */
  --ca-gutter: clamp(16px, 4vw, 40px);
  --ca-container-content: 1200px;
  --ca-container-narrow: 720px;
  --ca-container-measure: 68ch;

  /* Motion */
  --ca-duration-fast: 120ms;
  --ca-duration-base: 200ms;
  --ca-duration-slow: 320ms;
  --ca-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ca-ease-exit: cubic-bezier(0.3, 0, 1, 1);

  /* Layering */
  --ca-z-dropdown: 1000;
  --ca-z-sticky: 1100;
  --ca-z-overlay: 1200;
  --ca-z-dialog: 1300;
  --ca-z-toast: 1400;
}

/* Dark mode: shadows barely show on near-black, so depth comes from lighter surfaces (bg.surface, bg.subtle) plus a 1px
   border; shadows are kept faint and dark. Same approach as Apple's base/elevated backgrounds. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ca-shadow-1: 0 0 0 1px rgb(255 255 255 / 0.06);
  --ca-shadow-2: 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px rgb(0 0 0 / 0.5);
  --ca-shadow-3: 0 0 0 1px rgb(255 255 255 / 0.10), 0 16px 40px rgb(0 0 0 / 0.6);
} }
:root[data-theme="dark"] {
  --ca-shadow-1: 0 0 0 1px rgb(255 255 255 / 0.06);
  --ca-shadow-2: 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px rgb(0 0 0 / 0.5);
  --ca-shadow-3: 0 0 0 1px rgb(255 255 255 / 0.10), 0 16px 40px rgb(0 0 0 / 0.6);
}

/* Respect "reduce motion" in phone/computer settings */
@media (prefers-reduced-motion: reduce) { :root { --ca-duration-fast: 0ms; --ca-duration-base: 0ms; --ca-duration-slow: 0ms; } }

/* Breakpoints (CSS variables cannot be used inside @media, so use these values directly):
   sm  min-width: 480px   Large phones
   md  min-width: 768px   Tablets portrait
   lg  min-width: 1024px   Tablets landscape, small laptops
   xl  min-width: 1280px   Desktops
*/