/* ==========================================================================
   Design system: variables (Figma "Variables")
   Source: Figma "MAD - New Website Test MCP" (Colors, Typography, Layout pages)
   Two levels: primitives (never used directly) → semantic variables.
   Dark mode: data-theme="dark" on any element (page or section).

   Scope: variables are declared on .ds, not :root, so they don't override the
   variables of the legacy style.css (--grey-100, --grey-200… with other values).
   Once the header and footer move to the DS, they can go back to :root.
   ========================================================================== */

.ds {
  /* ---- Primitives: greys (named by % of black) ---- */
  --grey-0: #ffffff;
  --grey-50: #f2f2f2;
  --grey-100: #e6e6e6;
  --grey-150: #d9d9d9;
  --grey-200: #cccccc;
  --grey-300: #b3b3b3;
  --grey-400: #999999;
  --grey-500: #808080;
  --grey-600: #676767;
  --grey-700: #4d4d4d;
  --grey-800: #333333;
  --grey-850: #272727;
  --grey-900: #1a1a1a;
  --grey-950: #121212;
  --grey-1000: #000000;

  /* ---- Primitives: turquoise (base hue 500) ---- */
  --turquoise-50: #ecf9fb;
  --turquoise-100: #d9f4f8;
  --turquoise-150: #c6eef4;
  --turquoise-200: #b3e9f1;
  --turquoise-300: #8cdeea;
  --turquoise-400: #66d3e3;
  --turquoise-500: #40c8dc;
  --turquoise-600: #33a0b0;
  --turquoise-700: #267884;
  --turquoise-800: #1a5058;
  --turquoise-850: #133c42;
  --turquoise-900: #0d282c;
  --turquoise-950: #061416;

  /* ---- Primitives: orange ---- */
  --orange-50: #fdf5e8;
  --orange-100: #fbecd1;
  --orange-150: #f9e2ba;
  --orange-200: #f7d8a3;
  --orange-300: #f4c574;
  --orange-400: #f0b146;
  --orange-500: #ec9e18;
  --orange-600: #bd7e13;
  --orange-700: #8e5f0e;
  --orange-800: #5e3f0a;
  --orange-850: #472f07;
  --orange-900: #2f2005;
  --orange-950: #181002;

  /* ---- Primitives: green ---- */
  --green-50: #ebfff2;
  --green-100: #d6ffe6;
  --green-150: #c2ffd9;
  --green-200: #adffcd;
  --green-300: #85ffb3;
  --green-400: #5cff9a;
  --green-500: #33ff81;
  --green-600: #29cc67;
  --green-700: #1f994d;
  --green-800: #146634;
  --green-850: #0f4d27;
  --green-900: #0a331a;
  --green-950: #051a0d;

  /* ---- Primitives: blue ---- */
  --blue-50: #ebf2fd;
  --blue-100: #d6e4fb;
  --blue-150: #c2d7f9;
  --blue-200: #aecaf7;
  --blue-300: #85aff2;
  --blue-400: #5d95ee;
  --blue-500: #347aea;
  --blue-600: #2a62bb;
  --blue-700: #1f498c;
  --blue-800: #15315e;
  --blue-850: #102546;
  --blue-900: #0a182f;
  --blue-950: #050c17;

  /* ---- Primitives: red ---- */
  --red-50: #f8eaea;
  --red-100: #f2d4d4;
  --red-150: #ebbfbf;
  --red-200: #e5a9a9;
  --red-300: #d77e7e;
  --red-400: #ca5353;
  --red-500: #bd2828;
  --red-600: #972020;
  --red-700: #711818;
  --red-800: #4c1010;
  --red-850: #390c0c;
  --red-900: #260808;
  --red-950: #130404;

  /* ---- Primitives: alphas (named by opacity) ---- */
  --black-alpha-5: #0000000d;
  --black-alpha-10: #0000001a;
  --black-alpha-15: #00000026;
  --black-alpha-20: #00000033;
  --black-alpha-25: #00000040;
  --black-alpha-30: #0000004d;
  --black-alpha-40: #00000066;
  --black-alpha-50: #00000080;
  --black-alpha-60: #00000099;
  --black-alpha-70: #000000b2;
  --black-alpha-80: #000000cc;
  --black-alpha-90: #000000e5;
  --white-alpha-5: #ffffff0d;
  --white-alpha-10: #ffffff1a;
  --white-alpha-20: #ffffff33;
  --white-alpha-30: #ffffff4d;
  --white-alpha-40: #ffffff66;
  --white-alpha-50: #ffffff80;
  --white-alpha-60: #ffffff99;
  --white-alpha-70: #ffffffb2;
  --white-alpha-80: #ffffffcc;
  --white-alpha-90: #ffffffe5;
  --turquoise-alpha-10: #40c8dc1a;
  --turquoise-alpha-20: #40c8dc33;
  --turquoise-alpha-30: #40c8dc4d;
  --turquoise-alpha-40: #40c8dc66;
  --turquoise-alpha-50: #40c8dc80;
  --turquoise-alpha-60: #40c8dc99;
  --turquoise-alpha-70: #40c8dcb2;
  --turquoise-alpha-80: #40c8dccc;
  --turquoise-alpha-90: #40c8dce5;

  /* ---- Typography: family and weights (Mont) ---- */
  --font-family-mont: "Mont", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-weight-regular: 600;   /* Mont Regular  */
  --font-weight-semibold: 700;  /* Mont SemiBold */
  --font-weight-bold: 800;      /* Mont Bold     */
  --font-weight-heavy: 900;     /* Mont Heavy    */
  --line-height-display: 1.2;   /* Display */
  --line-height-tight: 1;       /* Label, Overline */
  --line-height-text: 1.4;      /* Body */
  --letter-spacing-overline: 0.06em;

  /* ---- Typography: sizes (desktop ≥ 1024) ---- */
  --type-display-h1: 60px;
  --type-display-h2: 48px;
  --type-display-h3: 40px;
  --type-display-h4: 32px;
  --type-display-h5: 24px;
  --type-display-h6: 20px;
  --type-body-xl: 24px;
  --type-body-lg: 20px;
  --type-body-md: 16px;
  --type-body-sm: 14px;
  --type-body-xs: 12px;
  --type-label-xl: 18px;
  --type-label-lg: 16px;
  --type-label-md: 14px;
  --type-label-sm: 12px;

  /* ---- Spacing (desktop and tablet; reduced on mobile, see below) ---- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;
  --spacing-section: 96px;

  /* ---- Radius ---- */
  --radius-sm: 2px;   /* buttons, tags */
  --radius-md: 4px;
  --radius-lg: 8px;   /* cards */
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ---- Size: control and icon heights ---- */
  --size-xs: 24px;
  --size-sm: 36px;
  --size-md: 40px;
  --size-lg: 48px;
  --size-xl: 56px;

  /* ---- Grid and container ---- */
  --grid-columns: 12;
  --grid-gutter: 24px;
  --grid-margin: 32px;
  --container-max-width: 1440px;

  /* ---- Motion ---- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* Tablet 768 → 1023 */
@media (max-width: 1023px) {
  .ds {
    --type-display-h1: 48px;
    --type-display-h2: 40px;
    --type-display-h3: 32px;
    --type-display-h4: 24px;
    --type-display-h5: 20px;
    --type-display-h6: 18px;
    --type-body-xl: 24px;
    --type-body-lg: 20px;
    --type-label-xl: 16px;
    --type-label-lg: 14px;
    --type-label-md: 12px;

    --size-sm: 40px;
    --size-md: 44px;

    --grid-columns: 8;
    --grid-gutter: 24px;
    --grid-margin: 24px;
    --spacing-section: 64px;
  }
}

/* Mobile 0 → 767 */
@media (max-width: 767px) {
  .ds {
    --type-display-h1: 28px;
    --type-display-h2: 28px;
    --type-display-h3: 24px;
    --type-display-h4: 20px;
    --type-display-h5: 18px;
    --type-display-h6: 16px;
    --type-body-xl: 20px;
    --type-body-lg: 16px;
    --type-label-xl: 14px;
    --type-label-lg: 14px;
    --type-label-md: 12px;

    --spacing-lg: 16px;
    --spacing-xl: 16px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 32px;

    --size-xl: 48px;

    --grid-columns: 4;
    --grid-gutter: 16px;
    --grid-margin: 16px;
    --spacing-section: 32px;
  }
}

/* ==========================================================================
   Semantic colors: light mode (default)
   ========================================================================== */
.ds,
.ds [data-theme="light"] {
  color-scheme: light;

  /* Background: surfaces, layers and states of interactive elements */
  --background-primary: var(--grey-0);
  --background-primary-hover: var(--grey-50);
  --background-primary-pressed: var(--grey-150);
  --background-secondary: var(--grey-50);
  --background-secondary-hover: var(--grey-100);
  --background-secondary-pressed: var(--grey-300);
  --background-tertiary: var(--grey-100);
  --background-tertiary-hover: var(--grey-150);
  --background-tertiary-pressed: var(--grey-300);
  --background-quaternary: var(--grey-300);
  --background-quaternary-hover: var(--grey-400);
  --background-overlay: var(--white-alpha-70);
  --background-overlay-hover: var(--white-alpha-80);
  --background-overlay-pressed: var(--white-alpha-90);
  --background-inverse: var(--grey-1000);
  --background-inverse-hover: var(--grey-850);
  --background-inverse-pressed: var(--grey-700);
  --background-inverse-disabled: var(--grey-300);
  --background-accent-subtle: var(--turquoise-100);
  --background-accent-subtle-hover: var(--turquoise-150);
  --background-accent-subtle-pressed: var(--turquoise-200);
  /* Accent Button / Icon Button fill (solid turquoise). Figma: background/accent, -hover, -pressed */
  --background-accent: var(--turquoise-600);
  --background-accent-hover: var(--turquoise-500);
  --background-accent-pressed: var(--turquoise-400);
  --background-error: var(--red-150);
  --background-error-hover: var(--red-200);
  --background-warning: var(--orange-150);
  --background-warning-hover: var(--orange-200);
  --background-info: var(--blue-150);
  --background-info-hover: var(--blue-200);
  --background-success: var(--green-100);
  --background-success-hover: var(--green-150);
  --background-scrim-dark: var(--black-alpha-30);        /* scrim over an image (upload) */
  --background-scrim-dark-subtle: var(--black-alpha-5);  /* card hover scrim */
  --background-scrim-light: var(--white-alpha-30);  /* header avatar hover */
  --background-scrim-strong: var(--black-alpha-70);
  --background-scrim-dark-strong: var(--black-alpha-90);
  --background-overlay-subtle-hover: var(--black-alpha-20);
  --background-overlay-subtle-pressed: var(--black-alpha-30);

  /* Content: text and icons */
  --content-primary: var(--grey-1000);
  --content-secondary: var(--grey-850);
  --content-tertiary: var(--grey-700);
  --content-quaternary: var(--grey-600);
  --content-muted: var(--grey-400);   /* helper text, drop zone text, menu titles (Figma content/muted) */
  --content-disabled: var(--grey-300);
  --content-inverse: var(--grey-0);
  --content-inverse-disabled: var(--grey-50);
  --content-accent: var(--turquoise-600);
  --content-accent-strong: var(--turquoise-700);
  --content-overlay-strong: var(--grey-1000);
  --content-error: var(--red-500);
  --content-error-strong: var(--red-700);
  --content-warning: var(--orange-500);
  --content-warning-strong: var(--orange-700);
  --content-info: var(--blue-500);
  --content-info-strong: var(--blue-700);
  --content-success: var(--green-700);
  --content-success-strong: var(--green-800);

  /* Border */
  --border-primary: var(--grey-700);
  --border-secondary: var(--grey-500);
  --border-tertiary: var(--grey-300);
  --border-quaternary: var(--grey-100);
  --border-strong: var(--grey-1000);
  --border-focus: var(--grey-1000);
  --border-accent: var(--turquoise-500);
  --border-error: var(--red-500);
  --border-inverse: var(--grey-0);

  /* Shadow */
  --shadow-subtle: var(--black-alpha-15);
  --shadow-default: var(--black-alpha-25);
  --shadow-strong: var(--black-alpha-30);
}

/* ==========================================================================
   Semantic colors: dark mode
   ========================================================================== */
.ds[data-theme="dark"],
.ds [data-theme="dark"] {
  color-scheme: dark;

  --background-primary: var(--grey-1000);
  --background-primary-hover: var(--grey-950);
  --background-primary-pressed: var(--grey-800);
  --background-secondary: var(--grey-950);
  --background-secondary-hover: var(--grey-850);
  --background-secondary-pressed: var(--grey-700);
  --background-tertiary: var(--grey-850);
  --background-tertiary-hover: var(--grey-800);
  --background-tertiary-pressed: var(--grey-600);
  --background-quaternary: var(--grey-500);
  --background-quaternary-hover: var(--grey-400);
  --background-overlay: var(--white-alpha-70);
  --background-overlay-hover: var(--white-alpha-80);
  --background-overlay-pressed: var(--white-alpha-90);
  --background-inverse: var(--grey-0);
  --background-inverse-hover: var(--grey-100);
  --background-inverse-pressed: var(--grey-300);
  --background-inverse-disabled: var(--grey-700);
  --background-accent-subtle: var(--turquoise-900);
  --background-accent-subtle-hover: var(--turquoise-850);
  --background-accent-subtle-pressed: var(--turquoise-800);
  --background-accent: var(--turquoise-500);
  --background-accent-hover: var(--turquoise-600);
  --background-accent-pressed: var(--turquoise-700);
  --background-error: var(--red-900);
  --background-error-hover: var(--red-850);
  --background-warning: var(--orange-900);
  --background-warning-hover: var(--orange-950);
  --background-info: var(--blue-900);
  --background-info-hover: var(--blue-850);
  --background-success: var(--green-950);
  --background-success-hover: var(--green-900);
  --background-scrim-dark: var(--black-alpha-30);
  --background-scrim-dark-subtle: var(--black-alpha-5);
  --background-scrim-light: var(--white-alpha-30);
  --background-scrim-strong: var(--black-alpha-70);
  --background-scrim-dark-strong: var(--black-alpha-90);
  --background-overlay-subtle-hover: var(--black-alpha-20);
  --background-overlay-subtle-pressed: var(--black-alpha-30);

  --content-primary: var(--grey-0);
  --content-secondary: var(--grey-200);
  --content-tertiary: var(--grey-400);
  --content-quaternary: var(--grey-500);
  --content-muted: var(--grey-600);
  --content-disabled: var(--grey-700);
  --content-inverse: var(--grey-1000);
  --content-inverse-disabled: var(--grey-300);
  --content-accent: var(--turquoise-500);
  --content-accent-strong: var(--turquoise-200);
  --content-overlay-strong: var(--grey-1000);
  --content-error: var(--red-400);
  --content-error-strong: var(--red-150);
  --content-warning: var(--orange-400);
  --content-warning-strong: var(--orange-150);
  --content-info: var(--blue-300);
  --content-info-strong: var(--blue-150);
  --content-success: var(--green-400);
  --content-success-strong: var(--green-150);

  --border-primary: var(--grey-500);
  --border-secondary: var(--grey-600);
  --border-tertiary: var(--grey-800);
  --border-quaternary: var(--grey-900);
  --border-strong: var(--grey-0);
  --border-focus: var(--grey-0);
  --border-accent: var(--turquoise-500);
  --border-error: var(--red-400);
  --border-inverse: var(--grey-1000);

  --shadow-subtle: var(--black-alpha-50);
  --shadow-default: var(--black-alpha-60);
  --shadow-strong: var(--black-alpha-70);
}

/* ==========================================================================
   Shadows: Shadow/XS → XL styles
   Redeclared on each theme to pick up that theme's shadow color
   (a composed variable is resolved where it is declared).
   XS and XL are not documented in Figma: values derived from the rule
   "offset = blur ÷ 3, doubled at each step".
   ========================================================================== */
.ds,
.ds [data-theme] {
  --shadow-xs: 0 1px 2px var(--shadow-subtle);
  --shadow-sm: 0 1px 4px var(--shadow-subtle);
  --shadow-md: 0 4px 12px var(--shadow-subtle);
  --shadow-lg: 0 6px 20px var(--shadow-subtle);
  --shadow-xl: 0 12px 40px var(--shadow-strong);
  --shadow-text: 0 0 25.5px var(--black-alpha-60);
}