/* Delos Digital — global CSS entry point. Import list only. */
/* Montserrat — the single Delos type family (master brand + product brands).
   No binaries were supplied with the brand assets, so the family is loaded from
   Google Fonts. Drop self-hosted woff2 files into assets/fonts/ and replace the
   @import with @font-face rules if the build must run offline. */
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./808a01b5d7687964.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./f5d7590130e41b69.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./e092b22aadd0541b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./30cf10b2e32e189a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./86589d0b59b31171.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("./808a01b5d7687964.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("./f5d7590130e41b69.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("./e092b22aadd0541b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("./30cf10b2e32e189a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("./86589d0b59b31171.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./744830a0e77dd14d.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./0b00fbd6edcc84cd.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./9e2672d100bc36a3.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./920711de9ae96c18.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./6438d7b8ea9c7c39.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./744830a0e77dd14d.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./0b00fbd6edcc84cd.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./9e2672d100bc36a3.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./920711de9ae96c18.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./6438d7b8ea9c7c39.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./744830a0e77dd14d.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./0b00fbd6edcc84cd.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./9e2672d100bc36a3.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./920711de9ae96c18.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./6438d7b8ea9c7c39.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./744830a0e77dd14d.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./0b00fbd6edcc84cd.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./9e2672d100bc36a3.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./920711de9ae96c18.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./6438d7b8ea9c7c39.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./744830a0e77dd14d.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./0b00fbd6edcc84cd.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./9e2672d100bc36a3.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./920711de9ae96c18.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./6438d7b8ea9c7c39.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --font-family-base: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-display: var(--font-family-base);
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Delos Digital colour system.
   Warm-spectrum values are sampled from the supplied vector logo artwork
   (LOGOMARK.svg / DELOS_HERO_FULL_COLOUR) and match the master spec. */
:root {
  /* Warm spectrum — master-brand energy colours */
  --delos-orange: #F36E2B;      /* primary CTA / main warm accent */
  --delos-amber: #FAA326;       /* secondary highlight, arc */
  --delos-red: #E24429;         /* motion bar, high-energy graphics */
  --delos-orange-red: #EC5627;  /* warm overlap tone */

  /* Warm interaction steps (derived, for hover/press only) */
  --delos-orange-hover: #E0611F;
  --delos-orange-press: #C8531A;
  --delos-orange-tint: #FDEDE2;
  --delos-amber-tint: #FEF3E0;

  /* Digital darks */
  --delos-midnight: #090040;        /* primary dark digital surface */
  --delos-indigo: #221A53;          /* secondary dark surface */
  --delos-digital-purple: #471396;  /* restrained product/UI accent */
  --delos-near-black: #101014;      /* long-form dark text */

  /* Dark interaction steps (derived) */
  --delos-midnight-hover: #140A52;
  --delos-midnight-press: #05002E;
  --delos-indigo-tint: #EDEAF6;

  /* Neutrals */
  --delos-white: #FFFFFF;
  --delos-soft-white: #F7F7FA;
  --delos-soft-grey: #EEF0F4;
  --delos-mid-grey: #6C697A;
  --delos-border: #DDDDE6;
  --delos-border-strong: #C6C6D4;

  /* Status — sourced from the current Virtual Showroom build, not the brand spec.
     Use with an icon or label; never colour alone. */
  --delos-success: #12B981;
  --delos-success-tint: #E3F7EF;
  --delos-info: #3C82F6;
  --delos-info-tint: #E6EFFE;
  --delos-warning: #FAA326;
  --delos-warning-tint: #FEF3E0;
  --delos-danger: #E24429;
  --delos-danger-tint: #FCE9E5;
}

/* Delos type scale. Desktop values from the master spec; fluid down to the
   stated mobile sizes. Headlines are concise and commercial — avoid all-caps
   above eyebrow size. */
:root {
  --weight-regular: 400; /* @kind font */
  --weight-medium: 500; /* @kind font */
  --weight-semibold: 600; /* @kind font */
  --weight-bold: 700; /* @kind font */
  --weight-extrabold: 800; /* @kind font */

  /* Sizes */
  --text-display: clamp(2.625rem, 4.6vw, 5rem);      /* 42 → 80 */
  --text-h1: clamp(2.625rem, 4vw, 4rem);             /* 42 → 64 */
  --text-h2: clamp(1.875rem, 3vw, 3.5rem);           /* 30 → 56 */
  --text-h3: clamp(1.5rem, 1.9vw, 2.125rem);         /* 24 → 34 */
  --text-h4: clamp(1.25rem, 1.4vw, 1.5rem);          /* 20 → 24 */
  --text-lead: clamp(1.125rem, 1.3vw, 1.5rem);       /* 18 → 24 */
  --text-body-lg: 1.125rem;                          /* 18 */
  --text-body: 1rem;                                 /* 16 */
  --text-ui: 0.9375rem;                              /* 15 */
  --text-ui-sm: 0.875rem;                            /* 14 */
  --text-eyebrow: 0.8125rem;                         /* 13 */
  --text-caption: 0.75rem;                           /* 12 */

  /* Line heights */
  --leading-display: 1.02; /* @kind font */
  --leading-heading: 1.1; /* @kind font */
  --leading-subheading: 1.22; /* @kind font */
  --leading-lead: 1.45; /* @kind font */
  --leading-body: 1.6; /* @kind font */
  --leading-ui: 1.35; /* @kind font */

  /* Tracking */
  --tracking-display: -0.022em;
  --tracking-heading: -0.015em;
  --tracking-body: 0em;
  --tracking-ui: 0.005em;
  --tracking-eyebrow: 0.12em;
  --tracking-wordmark: 0.18em;
}

/* 8px base spacing system. */
:root {
  --space-05: 4px;
  --space-1: 8px;
  --space-15: 12px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-14: 112px;
  --space-16: 128px;

  /* Section rhythm */
  --section-y: clamp(64px, 8vw, 128px); /* @kind spacing */
  --section-y-tight: clamp(48px, 5vw, 80px); /* @kind spacing */
}

/* Corner radii. Pills are reserved for tags, status and compact controls. */
:root {
  --radius-control: 8px;
  --radius-input: 8px;
  --radius-card: 14px;
  --radius-panel: 20px;
  --radius-panel-lg: 24px;
  --radius-media: 20px;
  --radius-pill: 999px;
}

/* Elevation is deliberately restrained: borders do most of the work.
   Shadows are tinted with Midnight Purple, never neutral black. */
:root {
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(9, 0, 64, 0.04);
  --shadow-raised: 0 10px 28px -16px rgba(9, 0, 64, 0.22);
  --shadow-overlay: 0 28px 64px -24px rgba(9, 0, 64, 0.34);
  --shadow-focus: 0 0 0 3px rgba(243, 110, 43, 0.32);
  --shadow-focus-dark: 0 0 0 3px rgba(250, 163, 38, 0.44);
}

/* Motion communicates progress, direction and reveal. No bounce, no playful easing. */
:root {
  --duration-instant: 120ms; /* @kind other */
  --duration-ui-fast: 160ms; /* @kind other */
  --duration-ui: 220ms; /* @kind other */
  --duration-ui-slow: 300ms; /* @kind other */
  --duration-reveal: 560ms; /* @kind other */
  --duration-reveal-slow: 800ms; /* @kind other */

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.22, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-reveal: cubic-bezier(0.16, 0.8, 0.24, 1); /* @kind other */
}

/* Layout: 12 / 8 / 4 column grid, strong left alignment, generous white space. */
:root {
  --container-max: 1360px;
  --container: 1280px;
  --container-narrow: 880px;
  --gutter: clamp(20px, 4vw, 48px); /* @kind spacing */
  --grid-gap: 24px;
  --grid-columns-desktop: 12; /* @kind other */
  --grid-columns-tablet: 8; /* @kind other */
  --grid-columns-mobile: 4; /* @kind other */
  --breakpoint-tablet: 900px; /* @kind other */
  --breakpoint-mobile: 640px; /* @kind other */
  --touch-target: 44px;
  --header-height: 76px;
}

/* Semantic aliases — use these in components, not raw palette values.
   Rule of thumb for any composition: one dark + one warm accent + neutrals. */
:root {
  /* Text */
  --text-heading: var(--delos-midnight);
  --text-body-color: var(--delos-near-black);
  --text-muted: var(--delos-mid-grey);
  --text-accent: var(--delos-orange);
  --text-inverse: var(--delos-white);
  --text-inverse-muted: rgba(255, 255, 255, 0.74);
  --text-link: var(--delos-midnight);
  --text-link-hover: var(--delos-orange);
  --text-link-on-dark: var(--delos-white);
  --text-link-on-dark-hover: var(--delos-amber);

  /* Surfaces */
  --surface-page: var(--delos-white);
  --surface-subtle: var(--delos-soft-white);
  --surface-sunken: var(--delos-soft-grey);
  --surface-card: var(--delos-white);
  --surface-card-subtle: var(--delos-soft-white);
  --surface-dark: var(--delos-midnight);
  --surface-dark-raised: var(--delos-indigo);
  --surface-dark-overlay: rgba(255, 255, 255, 0.07);
  --surface-accent: var(--delos-orange);
  --surface-accent-subtle: var(--delos-orange-tint);

  /* Borders */
  --border-subtle: var(--delos-border);
  --border-strong: var(--delos-border-strong);
  --border-on-dark: rgba(255, 255, 255, 0.16);
  --border-accent: var(--delos-orange);

  /* Controls */
  --control-primary-bg: var(--delos-orange);
  --control-primary-bg-hover: var(--delos-orange-hover);
  --control-primary-bg-active: var(--delos-orange-press);
  --control-primary-fg: var(--delos-white);

  --control-secondary-bg: var(--delos-midnight);
  --control-secondary-bg-hover: var(--delos-midnight-hover);
  --control-secondary-bg-active: var(--delos-midnight-press);
  --control-secondary-fg: var(--delos-white);

  --control-tertiary-bg: transparent;
  --control-tertiary-bg-hover: var(--delos-soft-white);
  --control-tertiary-fg: var(--delos-midnight);
  --control-tertiary-border: var(--delos-midnight);

  --control-height: 48px;
  --control-height-sm: 40px;
  --control-height-lg: 56px;

  /* Focus */
  --focus-ring: var(--shadow-focus);
  --focus-ring-dark: var(--shadow-focus-dark);

  /* Graphic devices */
  --device-motion-bar: var(--delos-red);
  --device-drop: var(--delos-orange);
  --device-arc: var(--delos-amber);
  --device-focus-frame: var(--delos-midnight);
}

/* Dark surface scope: drop this class on any dark section and the aliases flip. */
.delos-on-dark {
  --text-heading: var(--delos-white);
  --text-body-color: var(--delos-white);
  --text-muted: rgba(255, 255, 255, 0.74);
  --text-link: var(--delos-white);
  --text-link-hover: var(--delos-amber);
  --surface-card: var(--delos-indigo);
  --surface-card-subtle: rgba(255, 255, 255, 0.06);
  --border-subtle: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.28);
  --control-tertiary-fg: var(--delos-white);
  --control-tertiary-border: rgba(255, 255, 255, 0.4);
  --control-tertiary-bg-hover: rgba(255, 255, 255, 0.08);
  --device-focus-frame: var(--delos-white);
  --focus-ring: var(--shadow-focus-dark);
}

/* Minimal element defaults so any page that links styles.css starts on-brand. */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-body-color);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-heading);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

p { margin: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--duration-ui-fast) var(--ease-standard),
              border-color var(--duration-ui-fast) var(--ease-standard);
}
a:hover { color: var(--text-link-hover); }
a:focus-visible {
  outline: 2px solid var(--delos-orange);
  outline-offset: 3px;
  border-radius: 2px;
}

img, svg { max-width: 100%; }

:where(button, input, select, textarea) { font: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}