/* Authoritative design values for the website and Alias.
 * Application CSS contains composition and references only.
 * @media thresholds remain literals: CSS custom properties cannot be used there.
 * Mathematical zero, layout percentages, animation/artwork geometry and font-face metadata
 * (including background positioning, transform coordinates and clipping)
 * are intentionally local. SVG artwork and mascot Shadow DOM are separate assets.
 */
:root {
  --radius-round: 50%;
  --size-250px: 250px;
  --blur-40px: 40px;
  --ease-balanced: ease-in-out;
  --ease-natural: ease;
  --ease-linear: linear;
  /* blur */
  --blur-10px: 10px;
  --blur-12px: 12px;
  --blur-30px: 30px;
  --blur-40px: 40px;
  --blur-7px: 7px;
  /* ease */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-ui: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* font */
  --font-body: "Noto Sans", sans-serif;
  --font-brand: var(--font-brand-name), var(--font-body);
  --font-brand-name: "Gilmer";
  /* font-size */
  --font-size-0-9em: 0.9em;
  --font-size-1-1rem: 1.1rem;
  --font-size-1-2em: 1.2em;
  --font-size-1-2rem: 1.2rem;
  --font-size-1-5em: 1.5em;
  --font-size-1-7em: 1.7em;
  --font-size-1-8rem: 1.8rem;
  --font-size-100px: 100px;
  --font-size-12px: 12px;
  --font-size-13px: 13px;
  --font-size-14px: 14px;
  --font-size-15px: 15px;
  --font-size-16px: 16px;
  --font-size-17px: 17px;
  --font-size-1em: 1em;
  --font-size-1rem: 1rem;
  --font-size-2-1rem: 2.1rem;
  --font-size-2-2em: 2.2em;
  --font-size-2-5em: 2.5em;
  --font-size-2-5rem: 2.5rem;
  --font-size-2-7rem: 2.7rem;
  --font-size-20px: 20px;
  --font-size-22px: 22px;
  --font-size-23px: 23px;
  --font-size-25px: 25px;
  --font-size-26px: 26px;
  --font-size-27px: 27px;
  --font-size-29px: 29px;
  --font-size-2em: 2em;
  --font-size-2rem: 2rem;
  --font-size-38px: 38px;
  --font-size-48px: 48px;
  --font-size-52px: 52px;
  --font-size-68px: 68px;
  /* font-weight */
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-650: 650;
  --font-weight-700: 700;
  --font-weight-750: 750;
  --font-weight-800: 800;
  --font-weight-850: 850;
  --font-weight-900: 900;
  --font-weight-bold: bold;
  /* layer */
  --layer-0: 0;
  --layer-1: 1;
  --layer-100: 100;
  --layer-1000: 1000;
  --layer-1001: 1001;
  --layer-1002: 1002;
  --layer-2: 2;
  --layer-3: 3;
  /* leading */
  --leading-1: 1;
  --leading-1-15: 1.15;
  --leading-1-2: 1.2;
  --leading-1-25: 1.25;
  --leading-1-3: 1.3;
  --leading-1-4: 1.4;
  --leading-1-5: 1.5;
  --leading-1-7: 1.7;
  /* motion */
  --motion-0-1s: 0.1s;
  --motion-0-26s: 0.26s;
  --motion-0-2s: 0.2s;
  --motion-0-3s: 0.3s;
  --motion-0-55s: 0.55s;
  --motion-0-6s: 0.6s;
  --motion-0ms: 0ms;
  --motion-100ms: 100ms;
  --motion-160ms: 160ms;
  --motion-20s: 20s;
  --motion-280ms: 280ms;
  --motion-30s: 30s;
  --motion-400ms: 400ms;
  --motion-40s: 40s;
  --motion-menu: 0.5s;
  /* opacity */
  --opacity-0-7: 0.7;
  --opacity-0-8: 0.8;
  --opacity-disabled: 0.55;
  /* palette */
  --palette-alias-dark-accent: #65df75;
  --palette-alias-dark-bg: #101b20;
  --palette-alias-dark-blue: #203e50;
  --palette-alias-dark-blue-border: #375d70;
  --palette-alias-dark-hover: #253b42;
  --palette-alias-dark-ink: #edf5f2;
  --palette-alias-dark-line: #344b53;
  --palette-alias-dark-mint: #254039;
  --palette-alias-dark-mint-border: #3a6152;
  --palette-alias-dark-muted: #a7bbb9;
  --palette-alias-dark-pink: #3d2c3b;
  --palette-alias-dark-pink-border: #63445c;
  --palette-alias-dark-primary-border: #319f49;
  --palette-alias-dark-primary-ink: #14351e;
  --palette-alias-dark-raised: #1e3037;
  --palette-alias-dark-red: #e9917e;
  --palette-alias-dark-red-border: #b66353;
  --palette-alias-dark-soft: #243e2e;
  --palette-alias-dark-surface: #18272d;
  --palette-alias-light-accent: #4bd55d;
  --palette-alias-light-bg: #f5f8f3;
  --palette-alias-light-blue: #e5f4ff;
  --palette-alias-light-blue-border: #badbec;
  --palette-alias-light-danger-bg: #c94535;
  --palette-alias-light-danger-border: #9a2e23;
  --palette-alias-light-green-border: #2ca43e;
  --palette-alias-light-green-ink: #183d20;
  --palette-alias-light-hover: #f0f7ec;
  --palette-alias-light-ink: #304333;
  --palette-alias-light-line: #dfe8dc;
  --palette-alias-light-mint: #eff9e8;
  --palette-alias-light-mint-border: #c9dfbf;
  --palette-alias-light-muted: #617366;
  --palette-alias-light-pink: #f9e9f0;
  --palette-alias-light-pink-border: #e8c7d7;
  --palette-alias-light-primary: #258638;
  --palette-alias-light-primary-border: #17672a;
  --palette-alias-light-raised: #f7f9f5;
  --palette-alias-light-red: #f18c77;
  --palette-alias-light-red-border: #d56954;
  --palette-alias-light-soft: #eaf9dd;
  --palette-alpha-0-0-0-0_2: rgba(0, 0, 0, 0.2);
  --palette-alpha-11-44-32-0_6: rgba(11, 44, 32, 0.6);
  --palette-glow-red-rgb: 249, 51, 33;
  --palette-alpha-249-51-33-0_15: rgba(var(--palette-glow-red-rgb), 0.15);
  --palette-alpha-249-51-33-0_3: rgba(var(--palette-glow-red-rgb), 0.3);
  --palette-alpha-249-51-33-0_4: rgba(var(--palette-glow-red-rgb), 0.4);
  --palette-alpha-249-51-33-0_5: rgba(var(--palette-glow-red-rgb), 0.5);
  --palette-alpha-255-255-255-0_05: rgba(var(--palette-white-rgb), 0.05);
  --palette-alpha-255-255-255-0_08: rgba(var(--palette-white-rgb), 0.08);
  --palette-alpha-255-255-255-0_15: rgba(var(--palette-white-rgb), 0.15);
  --palette-alpha-255-255-255-0_3: rgba(var(--palette-white-rgb), 0.3);
  --palette-alpha-255-255-255-0_5: rgba(var(--palette-white-rgb), 0.5);
  --palette-alpha-255-255-255-0_7: rgba(var(--palette-white-rgb), 0.7);
  --palette-alpha-4-36-25-0: rgba(4, 36, 25, 0);
  --palette-brand-red: rgb(var(--palette-brand-red-rgb));
  --palette-brand-red-light: #ff4c43;
  --palette-brand-red-rgb: 249, 55, 33;
  --palette-focus: #308cda;
  --palette-footer: #042419;
  --palette-footer-ink: #a5cdbf;
  --palette-forest: #0b2c20;
  --palette-hero-1-rgb: 22, 93, 64;
  --palette-hero-2-rgb: 30, 130, 64;
  --palette-hero-3-rgb: 25, 95, 70;
  --palette-hero-4-rgb: 18, 88, 55;
  --palette-hero-5-rgb: 25, 110, 60;
  --palette-negative-ink: #48241a;
  --palette-progress-highlight: #ffffff65;
  --palette-rgb-10-43-31: rgb(10, 43, 31);
  --palette-selection: #f93321b9;
  --palette-slogan-green: #3ec37f;
  --palette-white-rgb: 255, 255, 255;
  --palette-white: rgb(var(--palette-white-rgb));
  /* radius */
  --radius-12px: 12px;
  --radius-14px: 14px;
  --radius-15px: 15px;
  --radius-16px: 16px;
  --radius-18px: 18px;
  --radius-20px: 20px;
  --radius-26px: 26px;
  --radius-34px: 34px;
  --radius-6px: 6px;
  --radius-8px: 8px;
  --radius-9px: 9px;
  /* shadow-offset */
  --shadow-offset-10px: 10px;
  --shadow-offset-4px: 4px;
  --shadow-offset-5px: 5px;
  --shadow-offset-6px: 6px;
  /* size */
  --size-1-2em: 1.2em;
  --size-1000px: 1000px;
  --size-100px: 100px;
  --size-110px: 110px;
  --size-1200px: 1200px;
  --size-120px: 120px;
  --size-130px: 130px;
  --size-140px: 140px;
  --size-145px: 145px;
  --size-150px: 150px;
  --size-170px: 170px;
  --size-17px: 17px;
  --size-180px: 180px;
  --size-18px: 18px;
  --size-20px: 20px;
  --size-210px: 210px;
  --size-22px: 22px;
  --size-23px: 23px;
  --size-24px: 24px;
  --size-25px: 25px;
  --size-27px: 27px;
  --size-28px: 28px;
  --size-29px: 29px;
  --size-2px: 2px;
  --size-300px: 300px;
  --size-30px: 30px;
  --size-33px: 33px;
  --size-34px: 34px;
  --size-380px: 380px;
  --size-38px: 38px;
  --size-3px: 3px;
  --size-420px: 420px;
  --size-430px: 430px;
  --size-44px: 44px;
  --size-48px: 48px;
  --size-4px: 4px;
  --size-500px: 500px;
  --size-50px: 50px;
  --size-52px: 52px;
  --size-54px: 54px;
  --size-560px: 560px;
  --size-56px: 56px;
  --size-58px: 58px;
  --size-60px: 60px;
  --size-650px: 650px;
  --size-68px: 68px;
  --size-70px: 70px;
  --size-72px: 72px;
  --size-74px: 74px;
  --size-76px: 76px;
  --size-80px: 80px;
  --size-850px: 850px;
  --size-8px: 8px;
  --size-900px: 900px;
  /* space */
  --space-100px: 100px;
  --space-10px: 10px;
  --space-11px: 11px;
  --space-12px: 12px;
  --space-13px: 13px;
  --space-14px: 14px;
  --space-15px: 15px;
  --space-16px: 16px;
  --space-17px: 17px;
  --space-18px: 18px;
  --space-200px: 200px;
  --space-20px: 20px;
  --space-22px: 22px;
  --space-24px: 24px;
  --space-25px: 25px;
  --space-26px: 26px;
  --space-27px: 27px;
  --space-28px: 28px;
  --space-2px: 2px;
  --space-30px: 30px;
  --space-32px: 32px;
  --space-35px: 35px;
  --space-36px: 36px;
  --space-38px: 38px;
  --space-3px: 3px;
  --space-40px: 40px;
  --space-4px: 4px;
  --space-500px: 500px;
  --space-50px: 50px;
  --space-58px: 58px;
  --space-5px: 5px;
  --space-60px: 60px;
  --space-6px: 6px;
  --space-70px: 70px;
  --space-75px: 75px;
  --space-7px: 7px;
  --space-80px: 80px;
  --space-8px: 8px;
  --space-90px: 90px;
  --space-9px: 9px;
  /* stroke */
  --stroke-1px: 1px;
  --stroke-2px: 2px;
  --stroke-3px: 3px;
  /* tracking */
  --tracking-0-2px: 0.2px;
  --tracking-0-5px: 0.5px;
  --tracking-tight-0-5px: -0.5px;
  --tracking-0-6px: 0.6px;
  --tracking-0-8px: -0.8px;
  --tracking-1px: 1px;
  --tracking-tight-1px: -1px;

  /* Website semantic palette and existing public variable names. */
  --color-background: var(--palette-forest);
  --color-text: var(--palette-white);
  --color-accent: var(--palette-brand-red);
  --color-accent-light: var(--palette-brand-red-light);
  --color-accent-15: var(--palette-alpha-249-51-33-0_15);
  --color-accent-30: var(--palette-alpha-249-51-33-0_3);
  --color-accent-40: var(--palette-alpha-249-51-33-0_4);
  --color-accent-50: var(--palette-alpha-249-51-33-0_5);
  --color-white-05: var(--palette-alpha-255-255-255-0_05);
  --color-white-15: var(--palette-alpha-255-255-255-0_15);
  --color-white-30: var(--palette-alpha-255-255-255-0_3);
  --color-black-20: var(--palette-alpha-0-0-0-0_2);
  --main-red-color: var(--color-accent);
  --color-interactive: var(--palette-brand-red-rgb);
  --color-text-secondary: var(--palette-alpha-255-255-255-0_7);
  --block-padding-horizontal: var(--space-20px);
  --color-bg1: var(--palette-forest);
  --color-bg2: var(--palette-rgb-10-43-31);
  --color1: var(--palette-hero-1-rgb);
  --color2: var(--palette-hero-2-rgb);
  --color3: var(--palette-hero-3-rgb);
  --color4: var(--palette-hero-4-rgb);
  --color5: var(--palette-hero-5-rgb);
  --circle-size: 80%;
  --blending: hard-light;
}

[data-app="alias"] {
  color-scheme: light;
  --bg: var(--palette-alias-light-bg);
  --surface: var(--palette-white);
  --raised: var(--palette-alias-light-raised);
  --ink: var(--palette-alias-light-ink);
  --muted: var(--palette-alias-light-muted);
  --line: var(--palette-alias-light-line);
  --hover: var(--palette-alias-light-hover);
  --accent: var(--palette-alias-light-accent);
  --soft: var(--palette-alias-light-soft);
  --primary: var(--palette-alias-light-primary);
  --primary-border: var(--palette-alias-light-primary-border);
  --primary-ink: var(--palette-white);
  --green: var(--palette-alias-light-accent);
  --green-border: var(--palette-alias-light-green-border);
  --green-ink: var(--palette-alias-light-green-ink);
  --mint: var(--palette-alias-light-mint);
  --mint-border: var(--palette-alias-light-mint-border);
  --red: var(--palette-alias-light-red);
  --red-border: var(--palette-alias-light-red-border);
  --danger-bg: var(--palette-alias-light-danger-bg);
  --icon-danger: var(--danger-bg);
  --negative-ink: var(--palette-negative-ink);
  --danger-border: var(--palette-alias-light-danger-border);
  --danger-ink: var(--palette-white);
  --pink: var(--palette-alias-light-pink);
  --pink-border: var(--palette-alias-light-pink-border);
  --blue: var(--palette-alias-light-blue);
  --blue-border: var(--palette-alias-light-blue-border);
  --gray: var(--muted);
  --radius-sm: var(--radius-12px);
  --radius: var(--radius-18px);
  --radius-lg: var(--radius-26px);
  --radius-xl: var(--radius-34px);
  --t-fast: var(--motion-160ms);
  --t-base: var(--motion-280ms);
  --ease: var(--ease-ui);
  --shadow: 0 var(--shadow-offset-5px) 0 var(--line);
  --button-border: var(--line);
  --button-bg: var(--surface);
  --button-ink: var(--ink);
  --alias-word-min-size: var(--font-size-22px);
  --alias-word-size: clamp(var(--font-size-26px), 7.5vw, var(--font-size-38px));
}

[data-app="alias"][data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--palette-alias-dark-bg);
  --surface: var(--palette-alias-dark-surface);
  --raised: var(--palette-alias-dark-raised);
  --ink: var(--palette-alias-dark-ink);
  --muted: var(--palette-alias-dark-muted);
  --line: var(--palette-alias-dark-line);
  --hover: var(--palette-alias-dark-hover);
  --accent: var(--palette-alias-dark-accent);
  --soft: var(--palette-alias-dark-soft);
  --primary: var(--palette-alias-dark-accent);
  --primary-border: var(--palette-alias-dark-primary-border);
  --primary-ink: var(--palette-alias-dark-primary-ink);
  --green: var(--palette-alias-dark-accent);
  --green-border: var(--palette-alias-dark-primary-border);
  --green-ink: var(--palette-alias-dark-primary-ink);
  --mint: var(--palette-alias-dark-mint);
  --mint-border: var(--palette-alias-dark-mint-border);
  --red: var(--palette-alias-dark-red);
  --icon-danger: var(--red);
  --red-border: var(--palette-alias-dark-red-border);
  --pink: var(--palette-alias-dark-pink);
  --pink-border: var(--palette-alias-dark-pink-border);
  --blue: var(--palette-alias-dark-blue);
  --blue-border: var(--palette-alias-dark-blue-border);
}