/*
  THE QWAKU GROUP - WEBSITE STYLES (design tokens)
  Built file - do not edit by hand. Change Figma, export, then run the two
  scripts in "SCRIPTS - REBUILD FROM FIGMA".

  How to use on a page:
    <link rel="stylesheet" href="qwaku-group-website-styles.css">
    <html data-brand="qwaku-hq" data-theme="light">   (theme: light, dark or auto)
  Then use the semantic names only, e.g.
    color: var(--text-primary);  background: var(--bg-surface);
    class="type-heading-01"
*/
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Outfit:wght@100..900&display=swap");

/* ===== 1. PRIMITIVES - raw values ===== */
:root {

  /* typography / font-family */
  --font-family-outfit: "Outfit";
  --font-family-manrope: "Manrope";

  /* typography / font-weight */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* typography / font-size */
  --font-size-11: 0.6875rem; /* 11px */
  --font-size-12: 0.75rem; /* 12px */
  --font-size-14: 0.875rem; /* 14px */
  --font-size-16: 1rem; /* 16px */
  --font-size-18: 1.125rem; /* 18px */
  --font-size-20: 1.25rem; /* 20px */
  --font-size-24: 1.5rem; /* 24px */
  --font-size-28: 1.75rem; /* 28px */
  --font-size-36: 2.25rem; /* 36px */
  --font-size-42: 2.625rem; /* 42px */
  --font-size-56: 3.5rem; /* 56px */

  /* typography / line-height */
  --line-height-display-01: 3.85rem; /* 61.6px */
  --line-height-heading-01: 3.0187rem; /* 48.3px */
  --line-height-heading-02: 2.5875rem; /* 41.4px */
  --line-height-heading-03: 2.1rem; /* 33.6px */
  --line-height-heading-04: 1.8rem; /* 28.8px */
  --line-height-heading-05: 1.5625rem; /* 25px */
  --line-height-heading-06: 1.25rem; /* 20px */
  --line-height-label-01: 1.0938rem; /* 17.5px */
  --line-height-label-02: 0.9375rem; /* 15px */
  --line-height-button-01: 1.25rem; /* 20px */
  --line-height-button-02: 1.0938rem; /* 17.5px */
  --line-height-body-01: 1.8rem; /* 28.8px */
  --line-height-body-02: 1.6rem; /* 25.6px */
  --line-height-body-03: 1.4rem; /* 22.4px */
  --line-height-body-strong: 1.6rem; /* 25.6px */
  --line-height-caption-01: 1.125rem; /* 18px */
  --line-height-caption-02: 1.0312rem; /* 16.5px */
  --line-height-number-01: 2.8125rem; /* 45px */
  --line-height-number-02: 2.1875rem; /* 35px */
  --line-height-number-03: 1.875rem; /* 30px */
  --line-height-number-04: 1.5625rem; /* 25px */
  --line-height-number-05: 1.25rem; /* 20px */
  --line-height-number-06: 1.0938rem; /* 17.5px */

  /* typography / letter-spacing */
  --letter-spacing-display-01: -0.105rem; /* -1.68px */
  --letter-spacing-heading-01: -0.0656rem; /* -1.05px */
  --letter-spacing-heading-02: -0.0563rem; /* -0.9px */
  --letter-spacing-heading-03: -0.035rem; /* -0.56px */
  --letter-spacing-heading-04: -0.0375rem; /* -0.6px */
  --letter-spacing-heading-05: -0.025rem; /* -0.4px */
  --letter-spacing-heading-06: -0.01rem; /* -0.16px */
  --letter-spacing-label-01: 0.14rem; /* 2.24px */
  --letter-spacing-label-02: 0.12rem; /* 1.92px */
  --letter-spacing-button-01: 0; /* 0px */
  --letter-spacing-button-02: 0; /* 0px */
  --letter-spacing-body-01: 0; /* 0px */
  --letter-spacing-body-02: 0; /* 0px */
  --letter-spacing-body-03: 0; /* 0px */
  --letter-spacing-body-strong: 0; /* 0px */
  --letter-spacing-caption-01: 0; /* 0px */
  --letter-spacing-caption-02: 0; /* 0px */
  --letter-spacing-number-01: -0.045rem; /* -0.72px */
  --letter-spacing-number-02: -0.035rem; /* -0.56px */
  --letter-spacing-number-03: -0.03rem; /* -0.48px */
  --letter-spacing-number-04: -0.025rem; /* -0.4px */
  --letter-spacing-number-05: -0.02rem; /* -0.32px */
  --letter-spacing-number-06: -0.0175rem; /* -0.28px */

  /* spacing */
  --spacing-none: 0; /* 0px */
  --spacing-xxs: 0.125rem; /* 2px */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-s: 0.5rem; /* 8px */
  --spacing-m: 1rem; /* 16px */
  --spacing-l: 2rem; /* 32px */
  --spacing-xl: 4rem; /* 64px */
  --spacing-xxl: 8rem; /* 128px */

  /* color / lemon */
  --color-lemon-50: #FEFDE8;
  --color-lemon-100: #FDFBD1;
  --color-lemon-200: #FAF7A3;
  --color-lemon-300: #F8F475;
  --color-lemon-400: #F5F047;
  --color-lemon-500: #F3EC19;
  --color-lemon-600: #C2BD14;
  --color-lemon-700: #928E0F;
  --color-lemon-800: #615E0A;
  --color-lemon-900: #312F05;
  --color-lemon-default: var(--color-lemon-500);

  /* color / emerald */
  --color-emerald-50: #E8F5ED;
  --color-emerald-100: #D1EBDB;
  --color-emerald-200: #A3D7B6;
  --color-emerald-300: #74C392;
  --color-emerald-400: #46AF6D;
  --color-emerald-500: #189B49;
  --color-emerald-600: #137C3A;
  --color-emerald-700: #0E5D2C;
  --color-emerald-800: #0A3E1D;
  --color-emerald-900: #051F0F;
  --color-emerald-default: var(--color-emerald-500);

  /* color / teal */
  --color-teal-50: #E6EBEA;
  --color-teal-100: #CDD6D5;
  --color-teal-200: #9CADAB;
  --color-teal-300: #6A8581;
  --color-teal-400: #395C57;
  --color-teal-500: #07332D;
  --color-teal-600: #062924;
  --color-teal-700: #041F1B;
  --color-teal-800: #031412;
  --color-teal-900: #010A09;
  --color-teal-default: var(--color-teal-500);

  /* color / off-white */
  --color-off-white: #F7F9FC;

  /* color / off-black */
  --color-off-black: #0B0E11;

  /* color / red */
  --color-red-50: #FCEDED;
  --color-red-100: #FADADB;
  --color-red-200: #F5B6B8;
  --color-red-300: #EF9194;
  --color-red-400: #EA6D71;
  --color-red-500: #E5484D;
  --color-red-600: #B73A3E;
  --color-red-700: #892B2E;
  --color-red-800: #5C1D1F;
  --color-red-900: #2E0E0F;
  --color-red-default: var(--color-red-500);

  /* color / orange */
  --color-orange-50: #FEF4E6;
  --color-orange-100: #FDE9CE;
  --color-orange-200: #FCD39D;
  --color-orange-300: #FABC6B;
  --color-orange-400: #F9A63A;
  --color-orange-500: #F79009;
  --color-orange-600: #C67307;
  --color-orange-700: #945605;
  --color-orange-800: #633A04;
  --color-orange-900: #311D02;
  --color-orange-default: var(--color-orange-500);

  /* color / blue */
  --color-blue-50: #EAF4FE;
  --color-blue-100: #D5E9FE;
  --color-blue-200: #ABD3FD;
  --color-blue-300: #82BCFC;
  --color-blue-400: #58A6FB;
  --color-blue-500: #2E90FA;
  --color-blue-600: #2573C8;
  --color-blue-700: #1C5696;
  --color-blue-800: #123A64;
  --color-blue-900: #091D32;
  --color-blue-default: var(--color-blue-500);

  /* color / white */
  --color-white: #FFFFFF;

  /* color / slate */
  --color-slate-50: #EBEDF0;
  --color-slate-100: #DFE2E4;
  --color-slate-200: #C8CACD;
  --color-slate-300: #B0B2B5;
  --color-slate-400: #999B9E;
  --color-slate-500: #818486;
  --color-slate-600: #696C6F;
  --color-slate-700: #525558;
  --color-slate-800: #3A3D40;
  --color-slate-900: #232528;
  --color-slate-default: var(--color-slate-500);

  /* color / off-black-alpha */
  --color-off-black-alpha-10: #0B0E111A;
  --color-off-black-alpha-40: #0B0E1166;
  --color-off-black-alpha-60: #0B0E1199;
  --color-off-black-alpha-80: #0B0E11CC;

  /* color / white-alpha */
  --color-white-alpha-80: #FFFFFFCC;

  /* color / logo-tail */
  --color-logo-tail-grey-teal: #809694;
  --color-logo-tail-olive: #7D9023;
  --color-logo-tail-dark-olive: #7F7D15;

  /* color / teal-alpha */
  --color-teal-alpha-800-80: #031412CC;

  /* radius */
  --radius-none: 0; /* 0px */
  --radius-xxs: 0.125rem; /* 2px */
  --radius-xs: 0.25rem; /* 4px */
  --radius-s: 0.5rem; /* 8px */
  --radius-m: 1rem; /* 16px */
  --radius-l: 2rem; /* 32px */
  --radius-xl: 9999px; /* fully round */

  /* motion / duration */
  --duration-none: 0ms;
  --duration-xxs: 25ms;
  --duration-xs: 50ms;
  --duration-s: 75ms;
  --duration-m: 150ms;
  --duration-l: 250ms;
  --duration-xl: 500ms;

  /* motion / ease */
  --ease-linear: linear;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --ease-expressive: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* icon */
  --icon-xs: 0.75rem; /* 12px */
  --icon-s: 1rem; /* 16px */
  --icon-m: 1.25rem; /* 20px */
  --icon-l: 1.5rem; /* 24px */
  --icon-xl: 2rem; /* 32px */
  --icon-xxl: 3rem; /* 48px */

  /* border-width */
  --border-width-none: 0; /* 0px */
  --border-width-thin: 0.0625rem; /* 1px */
  --border-width-medium: 0.125rem; /* 2px */
  --border-width-thick: 0.25rem; /* 4px */

  /* shadow */
  --shadow-s-offset-y: 0.125rem; /* 2px */
  --shadow-s-blur: 0.25rem; /* 4px */
  --shadow-m-offset-y: 0.25rem; /* 4px */
  --shadow-m-blur: 0.5rem; /* 8px */
  --shadow-l-offset-y: 0.5rem; /* 8px */
  --shadow-l-blur: 1rem; /* 16px */

  /* blur */
  --blur-m: 1rem; /* 16px */
  --blur-l: 2rem; /* 32px */

  /* format */
  --format-square-width: 1080px; /* video/social canvas size, fixed pixels */
  --format-square-height: 1080px; /* video/social canvas size, fixed pixels */
  --format-square-margin: 64px; /* video/social canvas size, fixed pixels */
  --format-square-columns: 6;
  --format-square-gutter: 32px; /* video/social canvas size, fixed pixels */
  --format-portrait-4x5-width: 1080px; /* video/social canvas size, fixed pixels */
  --format-portrait-4x5-height: 1350px; /* video/social canvas size, fixed pixels */
  --format-portrait-4x5-margin: 64px; /* video/social canvas size, fixed pixels */
  --format-portrait-4x5-columns: 6;
  --format-portrait-4x5-gutter: 32px; /* video/social canvas size, fixed pixels */
  --format-vertical-9x16-width: 1080px; /* video/social canvas size, fixed pixels */
  --format-vertical-9x16-height: 1920px; /* video/social canvas size, fixed pixels */
  --format-vertical-9x16-safe-top: 250px; /* video/social canvas size, fixed pixels */
  --format-vertical-9x16-safe-right: 160px; /* video/social canvas size, fixed pixels */
  --format-vertical-9x16-safe-bottom: 480px; /* video/social canvas size, fixed pixels */
  --format-vertical-9x16-safe-left: 64px; /* video/social canvas size, fixed pixels */
  --format-vertical-9x16-columns: 4;
  --format-vertical-9x16-gutter: 32px; /* video/social canvas size, fixed pixels */
  --format-broadcast-16x9-width: 1920px; /* video/social canvas size, fixed pixels */
  --format-broadcast-16x9-height: 1080px; /* video/social canvas size, fixed pixels */
  --format-broadcast-16x9-action-safe-x: 67px; /* video/social canvas size, fixed pixels */
  --format-broadcast-16x9-action-safe-y: 38px; /* video/social canvas size, fixed pixels */
  --format-broadcast-16x9-graphics-safe-x: 96px; /* video/social canvas size, fixed pixels */
  --format-broadcast-16x9-graphics-safe-y: 54px; /* video/social canvas size, fixed pixels */
  --format-broadcast-16x9-columns: 12;
  --format-broadcast-16x9-gutter: 32px; /* video/social canvas size, fixed pixels */
  --format-youtube-thumbnail-width: 1280px; /* video/social canvas size, fixed pixels */
  --format-youtube-thumbnail-height: 720px; /* video/social canvas size, fixed pixels */
  --format-youtube-thumbnail-margin: 64px; /* video/social canvas size, fixed pixels */
  --format-youtube-thumbnail-timestamp-width: 200px; /* video/social canvas size, fixed pixels */
  --format-youtube-thumbnail-timestamp-height: 80px; /* video/social canvas size, fixed pixels */
}

/* ===== 2. BRAND - QWAKU HQ ===== */
:root,
[data-brand="qwaku-hq"] {

  /* color / primary */
  --color-primary-50: var(--color-teal-50);
  --color-primary-100: var(--color-teal-100);
  --color-primary-200: var(--color-teal-200);
  --color-primary-300: var(--color-teal-300);
  --color-primary-400: var(--color-teal-400);
  --color-primary-500: var(--color-teal-500);
  --color-primary-600: var(--color-teal-600);
  --color-primary-700: var(--color-teal-700);
  --color-primary-800: var(--color-teal-800);
  --color-primary-900: var(--color-teal-900);
  --color-primary-default: var(--color-teal-default);

  /* color / secondary */
  --color-secondary-50: var(--color-lemon-50);
  --color-secondary-100: var(--color-lemon-100);
  --color-secondary-200: var(--color-lemon-200);
  --color-secondary-300: var(--color-lemon-300);
  --color-secondary-400: var(--color-lemon-400);
  --color-secondary-500: var(--color-lemon-500);
  --color-secondary-600: var(--color-lemon-600);
  --color-secondary-700: var(--color-lemon-700);
  --color-secondary-800: var(--color-lemon-800);
  --color-secondary-900: var(--color-lemon-900);
  --color-secondary-default: var(--color-lemon-default);

  /* color / tertiary */
  --color-tertiary-50: var(--color-emerald-50);
  --color-tertiary-100: var(--color-emerald-100);
  --color-tertiary-200: var(--color-emerald-200);
  --color-tertiary-300: var(--color-emerald-300);
  --color-tertiary-400: var(--color-emerald-400);
  --color-tertiary-500: var(--color-emerald-500);
  --color-tertiary-600: var(--color-emerald-600);
  --color-tertiary-700: var(--color-emerald-700);
  --color-tertiary-800: var(--color-emerald-800);
  --color-tertiary-900: var(--color-emerald-900);
  --color-tertiary-default: var(--color-emerald-default);

  /* color / success */
  --color-success-50: var(--color-emerald-50);
  --color-success-100: var(--color-emerald-100);
  --color-success-200: var(--color-emerald-200);
  --color-success-300: var(--color-emerald-300);
  --color-success-400: var(--color-emerald-400);
  --color-success-500: var(--color-emerald-500);
  --color-success-600: var(--color-emerald-600);
  --color-success-700: var(--color-emerald-700);
  --color-success-800: var(--color-emerald-800);
  --color-success-900: var(--color-emerald-900);
  --color-success-default: var(--color-emerald-default);

  /* color / error */
  --color-error-50: var(--color-red-50);
  --color-error-100: var(--color-red-100);
  --color-error-200: var(--color-red-200);
  --color-error-300: var(--color-red-300);
  --color-error-400: var(--color-red-400);
  --color-error-500: var(--color-red-500);
  --color-error-600: var(--color-red-600);
  --color-error-700: var(--color-red-700);
  --color-error-800: var(--color-red-800);
  --color-error-900: var(--color-red-900);
  --color-error-default: var(--color-red-default);

  /* color / warning */
  --color-warning-50: var(--color-orange-50);
  --color-warning-100: var(--color-orange-100);
  --color-warning-200: var(--color-orange-200);
  --color-warning-300: var(--color-orange-300);
  --color-warning-400: var(--color-orange-400);
  --color-warning-500: var(--color-orange-500);
  --color-warning-600: var(--color-orange-600);
  --color-warning-700: var(--color-orange-700);
  --color-warning-800: var(--color-orange-800);
  --color-warning-900: var(--color-orange-900);
  --color-warning-default: var(--color-orange-default);

  /* color / info */
  --color-info-50: var(--color-blue-50);
  --color-info-100: var(--color-blue-100);
  --color-info-200: var(--color-blue-200);
  --color-info-300: var(--color-blue-300);
  --color-info-400: var(--color-blue-400);
  --color-info-500: var(--color-blue-500);
  --color-info-600: var(--color-blue-600);
  --color-info-700: var(--color-blue-700);
  --color-info-800: var(--color-blue-800);
  --color-info-900: var(--color-blue-900);
  --color-info-default: var(--color-blue-default);

  /* color / neutral */
  --color-neutral-white: var(--color-white);
  --color-neutral-off-white: var(--color-off-white);
  --color-neutral-off-black: var(--color-off-black);
  --color-neutral-50: var(--color-slate-50);
  --color-neutral-100: var(--color-slate-100);
  --color-neutral-200: var(--color-slate-200);
  --color-neutral-300: var(--color-slate-300);
  --color-neutral-400: var(--color-slate-400);
  --color-neutral-500: var(--color-slate-500);
  --color-neutral-600: var(--color-slate-600);
  --color-neutral-700: var(--color-slate-700);
  --color-neutral-800: var(--color-slate-800);
  --color-neutral-900: var(--color-slate-900);
  --color-neutral-default: var(--color-slate-default);

  /* color / neutral-alpha */
  --color-neutral-alpha-10: var(--color-off-black-alpha-10);
  --color-neutral-alpha-40: var(--color-off-black-alpha-40);
  --color-neutral-alpha-60: var(--color-off-black-alpha-60);
  --color-neutral-alpha-80: var(--color-off-black-alpha-80);
  --color-neutral-alpha-white-80: var(--color-white-alpha-80);

  /* color / logo */
  --color-logo-tail-on-light: var(--color-logo-tail-grey-teal);
  --color-logo-tail-on-dark: var(--color-logo-tail-dark-olive);
  --color-logo-tail-on-teal: var(--color-logo-tail-olive);

  /* color / primary-alpha */
  --color-primary-alpha-800-80: var(--color-teal-alpha-800-80);

  /* font */
  --font-display: var(--font-family-outfit);
  --font-body: var(--font-family-manrope);
}

/* ===== 3. SEMANTIC - light mode (default) ===== */
:root,
[data-brand],
[data-theme="light"] {
  color-scheme: light;
  /* effects and gradients (Figma styles) */
  --shadow-s: 0 var(--shadow-s-offset-y) var(--shadow-s-blur) 0 var(--shadow-color);
  --shadow-m: 0 var(--shadow-m-offset-y) var(--shadow-m-blur) 0 var(--shadow-color);
  --shadow-l: 0 var(--shadow-l-offset-y) var(--shadow-l-blur) 0 var(--shadow-color);
  --backdrop-blur-m: blur(var(--blur-m));
  --backdrop-blur-l: blur(var(--blur-l));
  --gradient-brand-depth: linear-gradient(to bottom right, var(--color-primary-600) 0%, var(--color-tertiary-500) 100%);
  --gradient-brand-sweep: linear-gradient(to bottom right, var(--color-primary-500) 10%, var(--color-tertiary-500) 50%, var(--color-secondary-500) 100%);
  --gradient-text-safe-fade: linear-gradient(to bottom, #0B0E1100 0%, var(--color-neutral-alpha-80) 100%);

  /* bg */
  --bg-page: var(--color-neutral-off-white);
  --bg-surface: var(--color-neutral-white);
  --bg-subtle: var(--color-neutral-100);
  --bg-brand: var(--color-primary-500);
  --bg-accent: var(--color-secondary-500);
  --bg-overlay: var(--color-neutral-alpha-60);
  --bg-frosted: var(--color-neutral-alpha-white-80);
  --bg-surface-hover: var(--color-neutral-50);
  --bg-surface-selected: var(--color-primary-50);
  --bg-icon-box: var(--color-tertiary-50);

  /* text */
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-700);
  --text-disabled: var(--color-neutral-400);
  --text-on-brand: var(--color-neutral-off-white);
  --text-on-accent: var(--color-primary-500);
  --text-link: var(--color-tertiary-600);
  --text-brand: var(--color-primary-500);
  --text-link-hover: var(--color-tertiary-700);

  /* border */
  --border-subtle: var(--color-neutral-200);
  --border-strong: var(--color-neutral-500);
  --border-focus: var(--color-tertiary-500);
  --border-current: var(--color-tertiary-500);

  /* button */
  --button-primary-bg: var(--color-primary-500);
  --button-primary-bg-hover: var(--color-tertiary-600);
  --button-primary-text: var(--color-neutral-off-white);
  --button-primary-bg-pressed: var(--color-tertiary-600);
  --button-primary-text-hover: var(--color-neutral-off-white);
  --button-primary-text-pressed: var(--color-neutral-off-white);
  --button-secondary-bg: var(--color-neutral-100);
  --button-secondary-bg-hover: var(--color-tertiary-600);
  --button-secondary-text: var(--color-primary-500);
  --button-secondary-bg-pressed: var(--color-tertiary-600);
  --button-secondary-text-hover: var(--color-neutral-off-white);
  --button-secondary-text-pressed: var(--color-neutral-off-white);
  --button-disabled-bg: var(--color-neutral-100);
  --button-disabled-text: var(--color-neutral-400);
  --button-ghost-text: var(--color-primary-500);
  --button-ghost-bg-hover: var(--color-neutral-100);
  --button-ghost-bg-pressed: var(--color-neutral-200);
  --button-danger-bg: var(--color-error-600);
  --button-danger-bg-hover: var(--color-error-700);
  --button-danger-bg-pressed: var(--color-error-800);
  --button-danger-text: var(--color-neutral-off-white);

  /* feedback */
  --feedback-success-bg: var(--color-success-50);
  --feedback-success-text: var(--color-success-700);
  --feedback-success-border: var(--color-success-500);
  --feedback-error-bg: var(--color-error-50);
  --feedback-error-text: var(--color-error-700);
  --feedback-error-border: var(--color-error-500);
  --feedback-warning-bg: var(--color-warning-50);
  --feedback-warning-text: var(--color-warning-700);
  --feedback-warning-border: var(--color-warning-500);
  --feedback-info-bg: var(--color-info-50);
  --feedback-info-text: var(--color-info-700);
  --feedback-info-border: var(--color-info-500);

  /* icon */
  --icon-default: var(--text-primary);
  --icon-secondary: var(--text-secondary);
  --icon-brand: var(--color-tertiary-700);

  /* radius */
  --radius-button: var(--radius-xl);
  --radius-card: var(--radius-l);
  --radius-pill: var(--radius-xl);

  /* space */
  --space-card-padding: var(--spacing-m);
  --space-section-gap: var(--spacing-xl);

  /* motion / hover */
  --motion-hover-duration: var(--duration-xs);
  --motion-hover-easing: var(--ease-standard);

  /* motion / dropdown-open */
  --motion-dropdown-open-duration: var(--duration-m);
  --motion-dropdown-open-easing: var(--ease-enter);

  /* motion / popup-open */
  --motion-popup-open-duration: var(--duration-l);
  --motion-popup-open-easing: var(--ease-enter);

  /* motion / popup-close */
  --motion-popup-close-duration: var(--duration-m);
  --motion-popup-close-easing: var(--ease-exit);

  /* motion / page-change */
  --motion-page-change-duration: var(--duration-xl);
  --motion-page-change-easing: var(--ease-standard);

  /* shadow */
  --shadow-color: var(--color-neutral-alpha-10);

  /* border-width */
  --border-width-default: var(--border-width-thin);
  --border-width-focus: var(--border-width-medium);
  --border-width-focus-offset: var(--border-width-medium);

  /* input */
  --input-placeholder: var(--color-neutral-600);
  --input-border-error: var(--color-error-500);
  --input-border-hover: var(--color-neutral-700);

  /* tag */
  --tag-selected-bg: var(--color-tertiary-600);
  --tag-selected-text: var(--color-neutral-off-white);

  /* logo */
  --logo-mark: var(--color-tertiary-500);
  --logo-wordmark: var(--color-primary-500);
  --logo-tail: var(--color-logo-tail-on-light);
}

/* ===== 3. SEMANTIC - dark mode ===== */
[data-theme="dark"],
[data-theme="dark"] [data-brand] {
  color-scheme: dark;
  /* effects and gradients (Figma styles) */
  --shadow-s: 0 var(--shadow-s-offset-y) var(--shadow-s-blur) 0 var(--shadow-color);
  --shadow-m: 0 var(--shadow-m-offset-y) var(--shadow-m-blur) 0 var(--shadow-color);
  --shadow-l: 0 var(--shadow-l-offset-y) var(--shadow-l-blur) 0 var(--shadow-color);
  --backdrop-blur-m: blur(var(--blur-m));
  --backdrop-blur-l: blur(var(--blur-l));
  --gradient-brand-depth: linear-gradient(to bottom right, var(--color-primary-600) 0%, var(--color-tertiary-500) 100%);
  --gradient-brand-sweep: linear-gradient(to bottom right, var(--color-primary-500) 10%, var(--color-tertiary-500) 50%, var(--color-secondary-500) 100%);
  --gradient-text-safe-fade: linear-gradient(to bottom, #0B0E1100 0%, var(--color-neutral-alpha-80) 100%);

  /* bg */
  --bg-page: var(--color-primary-800);
  --bg-surface: var(--color-primary-500);
  --bg-subtle: var(--color-primary-600);
  --bg-brand: var(--color-primary-500);
  --bg-accent: var(--color-secondary-500);
  --bg-overlay: var(--color-neutral-alpha-60);
  --bg-frosted: var(--color-primary-alpha-800-80);
  --bg-surface-hover: var(--color-primary-400);
  --bg-surface-selected: var(--color-primary-400);
  --bg-icon-box: var(--color-tertiary-900);

  /* text */
  --text-primary: var(--color-neutral-off-white);
  --text-secondary: var(--color-primary-100);
  --text-disabled: var(--color-primary-400);
  --text-on-brand: var(--color-neutral-off-white);
  --text-on-accent: var(--color-primary-500);
  --text-link: var(--color-tertiary-300);
  --text-brand: var(--color-primary-200);
  --text-link-hover: var(--color-tertiary-200);

  /* border */
  --border-subtle: var(--color-primary-400);
  --border-strong: var(--color-primary-300);
  --border-focus: var(--color-tertiary-400);
  --border-current: var(--color-tertiary-500);

  /* button */
  --button-primary-bg: var(--color-secondary-500);
  --button-primary-bg-hover: var(--color-tertiary-600);
  --button-primary-text: var(--color-primary-500);
  --button-primary-bg-pressed: var(--color-tertiary-600);
  --button-primary-text-hover: var(--color-neutral-off-white);
  --button-primary-text-pressed: var(--color-neutral-off-white);
  --button-secondary-bg: var(--color-neutral-off-white);
  --button-secondary-bg-hover: var(--color-tertiary-600);
  --button-secondary-text: var(--color-primary-500);
  --button-secondary-bg-pressed: var(--color-tertiary-600);
  --button-secondary-text-hover: var(--color-neutral-off-white);
  --button-secondary-text-pressed: var(--color-neutral-off-white);
  --button-disabled-bg: var(--color-primary-600);
  --button-disabled-text: var(--color-primary-400);
  --button-ghost-text: var(--color-neutral-off-white);
  --button-ghost-bg-hover: var(--color-primary-600);
  --button-ghost-bg-pressed: var(--color-primary-500);
  --button-danger-bg: var(--color-error-600);
  --button-danger-bg-hover: var(--color-error-700);
  --button-danger-bg-pressed: var(--color-error-800);
  --button-danger-text: var(--color-neutral-off-white);

  /* feedback */
  --feedback-success-bg: var(--color-success-900);
  --feedback-success-text: var(--color-success-300);
  --feedback-success-border: var(--color-success-500);
  --feedback-error-bg: var(--color-error-900);
  --feedback-error-text: var(--color-error-300);
  --feedback-error-border: var(--color-error-500);
  --feedback-warning-bg: var(--color-warning-900);
  --feedback-warning-text: var(--color-warning-300);
  --feedback-warning-border: var(--color-warning-500);
  --feedback-info-bg: var(--color-info-900);
  --feedback-info-text: var(--color-info-300);
  --feedback-info-border: var(--color-info-500);

  /* icon */
  --icon-default: var(--text-primary);
  --icon-secondary: var(--text-secondary);
  --icon-brand: var(--color-tertiary-300);

  /* radius */
  --radius-button: var(--radius-xl);
  --radius-card: var(--radius-l);
  --radius-pill: var(--radius-xl);

  /* space */
  --space-card-padding: var(--spacing-m);
  --space-section-gap: var(--spacing-xl);

  /* motion / hover */
  --motion-hover-duration: var(--duration-xs);
  --motion-hover-easing: var(--ease-standard);

  /* motion / dropdown-open */
  --motion-dropdown-open-duration: var(--duration-m);
  --motion-dropdown-open-easing: var(--ease-enter);

  /* motion / popup-open */
  --motion-popup-open-duration: var(--duration-l);
  --motion-popup-open-easing: var(--ease-enter);

  /* motion / popup-close */
  --motion-popup-close-duration: var(--duration-m);
  --motion-popup-close-easing: var(--ease-exit);

  /* motion / page-change */
  --motion-page-change-duration: var(--duration-xl);
  --motion-page-change-easing: var(--ease-standard);

  /* shadow */
  --shadow-color: var(--color-neutral-alpha-40);

  /* border-width */
  --border-width-default: var(--border-width-thin);
  --border-width-focus: var(--border-width-medium);
  --border-width-focus-offset: var(--border-width-medium);

  /* input */
  --input-placeholder: var(--color-primary-200);
  --input-border-error: var(--color-error-500);
  --input-border-hover: var(--color-primary-200);

  /* tag */
  --tag-selected-bg: var(--color-tertiary-600);
  --tag-selected-text: var(--color-neutral-off-white);

  /* logo */
  --logo-mark: var(--color-secondary-500);
  --logo-wordmark: var(--color-neutral-off-white);
  --logo-tail: var(--color-logo-tail-on-teal);
}

/* data-theme="auto" follows the viewer's phone or computer setting */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"],
  [data-theme="auto"] [data-brand] {
  color-scheme: dark;
  /* effects and gradients (Figma styles) */
  --shadow-s: 0 var(--shadow-s-offset-y) var(--shadow-s-blur) 0 var(--shadow-color);
  --shadow-m: 0 var(--shadow-m-offset-y) var(--shadow-m-blur) 0 var(--shadow-color);
  --shadow-l: 0 var(--shadow-l-offset-y) var(--shadow-l-blur) 0 var(--shadow-color);
  --backdrop-blur-m: blur(var(--blur-m));
  --backdrop-blur-l: blur(var(--blur-l));
  --gradient-brand-depth: linear-gradient(to bottom right, var(--color-primary-600) 0%, var(--color-tertiary-500) 100%);
  --gradient-brand-sweep: linear-gradient(to bottom right, var(--color-primary-500) 10%, var(--color-tertiary-500) 50%, var(--color-secondary-500) 100%);
  --gradient-text-safe-fade: linear-gradient(to bottom, #0B0E1100 0%, var(--color-neutral-alpha-80) 100%);
  --bg-page: var(--color-primary-800);
  --bg-surface: var(--color-primary-500);
  --bg-subtle: var(--color-primary-600);
  --bg-brand: var(--color-primary-500);
  --bg-accent: var(--color-secondary-500);
  --bg-overlay: var(--color-neutral-alpha-60);
  --bg-frosted: var(--color-primary-alpha-800-80);
  --bg-surface-hover: var(--color-primary-400);
  --bg-surface-selected: var(--color-primary-400);
  --bg-icon-box: var(--color-tertiary-900);
  --text-primary: var(--color-neutral-off-white);
  --text-secondary: var(--color-primary-100);
  --text-disabled: var(--color-primary-400);
  --text-on-brand: var(--color-neutral-off-white);
  --text-on-accent: var(--color-primary-500);
  --text-link: var(--color-tertiary-300);
  --text-brand: var(--color-primary-200);
  --text-link-hover: var(--color-tertiary-200);
  --border-subtle: var(--color-primary-400);
  --border-strong: var(--color-primary-300);
  --border-focus: var(--color-tertiary-400);
  --border-current: var(--color-tertiary-500);
  --button-primary-bg: var(--color-secondary-500);
  --button-primary-bg-hover: var(--color-tertiary-600);
  --button-primary-text: var(--color-primary-500);
  --button-primary-bg-pressed: var(--color-tertiary-600);
  --button-primary-text-hover: var(--color-neutral-off-white);
  --button-primary-text-pressed: var(--color-neutral-off-white);
  --button-secondary-bg: var(--color-neutral-off-white);
  --button-secondary-bg-hover: var(--color-tertiary-600);
  --button-secondary-text: var(--color-primary-500);
  --button-secondary-bg-pressed: var(--color-tertiary-600);
  --button-secondary-text-hover: var(--color-neutral-off-white);
  --button-secondary-text-pressed: var(--color-neutral-off-white);
  --button-disabled-bg: var(--color-primary-600);
  --button-disabled-text: var(--color-primary-400);
  --button-ghost-text: var(--color-neutral-off-white);
  --button-ghost-bg-hover: var(--color-primary-600);
  --button-ghost-bg-pressed: var(--color-primary-500);
  --button-danger-bg: var(--color-error-600);
  --button-danger-bg-hover: var(--color-error-700);
  --button-danger-bg-pressed: var(--color-error-800);
  --button-danger-text: var(--color-neutral-off-white);
  --feedback-success-bg: var(--color-success-900);
  --feedback-success-text: var(--color-success-300);
  --feedback-success-border: var(--color-success-500);
  --feedback-error-bg: var(--color-error-900);
  --feedback-error-text: var(--color-error-300);
  --feedback-error-border: var(--color-error-500);
  --feedback-warning-bg: var(--color-warning-900);
  --feedback-warning-text: var(--color-warning-300);
  --feedback-warning-border: var(--color-warning-500);
  --feedback-info-bg: var(--color-info-900);
  --feedback-info-text: var(--color-info-300);
  --feedback-info-border: var(--color-info-500);
  --icon-default: var(--text-primary);
  --icon-secondary: var(--text-secondary);
  --icon-brand: var(--color-tertiary-300);
  --radius-button: var(--radius-xl);
  --radius-card: var(--radius-l);
  --radius-pill: var(--radius-xl);
  --space-card-padding: var(--spacing-m);
  --space-section-gap: var(--spacing-xl);
  --motion-hover-duration: var(--duration-xs);
  --motion-hover-easing: var(--ease-standard);
  --motion-dropdown-open-duration: var(--duration-m);
  --motion-dropdown-open-easing: var(--ease-enter);
  --motion-popup-open-duration: var(--duration-l);
  --motion-popup-open-easing: var(--ease-enter);
  --motion-popup-close-duration: var(--duration-m);
  --motion-popup-close-easing: var(--ease-exit);
  --motion-page-change-duration: var(--duration-xl);
  --motion-page-change-easing: var(--ease-standard);
  --shadow-color: var(--color-neutral-alpha-40);
  --border-width-default: var(--border-width-thin);
  --border-width-focus: var(--border-width-medium);
  --border-width-focus-offset: var(--border-width-medium);
  --input-placeholder: var(--color-primary-200);
  --input-border-error: var(--color-error-500);
  --input-border-hover: var(--color-primary-200);
  --tag-selected-bg: var(--color-tertiary-600);
  --tag-selected-text: var(--color-neutral-off-white);
  --logo-mark: var(--color-secondary-500);
  --logo-wordmark: var(--color-neutral-off-white);
  --logo-tail: var(--color-logo-tail-on-teal);
}
}

/* ===== 4. TEXT STYLES - same names as the Figma text styles ===== */
.type-display-01 { /* Figma: Display/01 */
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--font-size-56);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-display-01);
  letter-spacing: var(--letter-spacing-display-01);
}
.type-heading-01 { /* Figma: Heading/01 */
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-heading-01);
  letter-spacing: var(--letter-spacing-heading-01);
}
.type-heading-02 { /* Figma: Heading/02 */
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--font-size-36);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-heading-02);
  letter-spacing: var(--letter-spacing-heading-02);
}
.type-heading-03 { /* Figma: Heading/03 */
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading-03);
  letter-spacing: var(--letter-spacing-heading-03);
}
.type-heading-04 { /* Figma: Heading/04 */
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-heading-04);
  letter-spacing: var(--letter-spacing-heading-04);
}
.type-heading-05 { /* Figma: Heading/05 */
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading-05);
  letter-spacing: var(--letter-spacing-heading-05);
}
.type-heading-06 { /* Figma: Heading/06 */
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading-06);
  letter-spacing: var(--letter-spacing-heading-06);
}
.type-label-01 { /* Figma: Label/01 */
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-label-01);
  letter-spacing: var(--letter-spacing-label-01);
  text-transform: uppercase;
}
.type-label-02 { /* Figma: Label/02 */
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-label-02);
  letter-spacing: var(--letter-spacing-label-02);
  text-transform: uppercase;
}
.type-button-01 { /* Figma: Button/01 */
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-button-01);
  letter-spacing: var(--letter-spacing-button-01);
}
.type-button-02 { /* Figma: Button/02 */
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-button-02);
  letter-spacing: var(--letter-spacing-button-02);
}
.type-body-01 { /* Figma: Body/01 */
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-01);
  letter-spacing: var(--letter-spacing-body-01);
}
.type-body-02 { /* Figma: Body/02 */
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-02);
  letter-spacing: var(--letter-spacing-body-02);
}
.type-body-03 { /* Figma: Body/03 */
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-03);
  letter-spacing: var(--letter-spacing-body-03);
}
.type-body-strong { /* Figma: Body/Strong */
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body-strong);
  letter-spacing: var(--letter-spacing-body-strong);
}
.type-caption-01 { /* Figma: Caption/01 */
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-caption-01);
  letter-spacing: var(--letter-spacing-caption-01);
}
.type-caption-02 { /* Figma: Caption/02 */
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-caption-02);
  letter-spacing: var(--letter-spacing-caption-02);
}
.type-number-01 { /* Figma: Number/01 */
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--font-size-36);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-number-01);
  letter-spacing: var(--letter-spacing-number-01);
  font-variant-numeric: tabular-nums;
}
.type-number-02 { /* Figma: Number/02 */
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-number-02);
  letter-spacing: var(--letter-spacing-number-02);
  font-variant-numeric: tabular-nums;
}
.type-number-03 { /* Figma: Number/03 */
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-number-03);
  letter-spacing: var(--letter-spacing-number-03);
  font-variant-numeric: tabular-nums;
}
.type-number-04 { /* Figma: Number/04 */
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-number-04);
  letter-spacing: var(--letter-spacing-number-04);
  font-variant-numeric: tabular-nums;
}
.type-number-05 { /* Figma: Number/05 */
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-number-05);
  letter-spacing: var(--letter-spacing-number-05);
  font-variant-numeric: tabular-nums;
}
.type-number-06 { /* Figma: Number/06 */
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-number-06);
  letter-spacing: var(--letter-spacing-number-06);
  font-variant-numeric: tabular-nums;
}