/* SPREEAI Partner portal — design tokens
   Extracted verbatim from the Tuesday-release prototype bundle.
   Source of truth: SPREEAI Product Design System (Figma).
   Load order matters: fig variables, then typography, then spacing. */

/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --available-100: rgb(221,237,255); /* @kind color */
  --available-900: rgb(44,99,161); /* @kind color */
  --brand-50: rgb(46,182,125); /* @kind color */
  --brand-background-2-rest: var(--colors-brand-comm-blue-160); /* @kind color */
  --brand-foreground-link-rest: var(--colors-brand-comm-blue-70); /* @kind color */
  --brand-primary-000: rgb(255,255,255); /* @kind color */
  --brand-primary-100: rgb(255,255,255); /* @kind color */
  --brand-primary-200: rgb(249,249,249); /* @kind color */
  --brand-primary-300: rgb(242,242,242); /* @kind color */
  --brand-primary-400: rgb(235,235,235); /* @kind color */
  --brand-primary-500: rgb(191,191,191); /* @kind color */
  --brand-primary-600: rgb(128,128,128); /* @kind color */
  --brand-primary-700: rgb(64,64,64); /* @kind color */
  --brand-primary-800: rgb(33,33,33); /* @kind color */
  --brand-primary-900: rgb(0,0,0); /* @kind color */
  --button-corner-radius: var(--corner-radius-medium);
  --colors-brand-comm-blue-100: rgb(71,158,245); /* @kind color */
  --colors-brand-comm-blue-160: rgb(235,243,252); /* @kind color */
  --colors-brand-comm-blue-20: rgb(8,35,56); /* @kind color */
  --colors-brand-comm-blue-70: rgb(17,94,163); /* @kind color */
  --colors-error-error100: rgb(242,168,168); /* @kind color */
  --colors-error-error900: rgb(211,47,47); /* @kind color */
  --colors-neutral-black: rgb(0,0,0); /* @kind color */
  --colors-neutral-grey-14: rgb(36,36,36); /* @kind color */
  --colors-neutral-grey-26: rgb(66,66,66); /* @kind color */
  --colors-neutral-grey-88: rgb(224,224,224); /* @kind color */
  --colors-neutral-grey-92: rgb(235,235,235); /* @kind color */
  --colors-neutral-grey-black: rgb(0,0,0); /* @kind color */
  --colors-neutral-grey-white: rgb(255,255,255); /* @kind color */
  --colors-neutral-white: rgb(255,255,255); /* @kind color */
  --colors-tertiary-tertiary300: rgb(189,189,189); /* @kind color */
  --corner-radius-circular: 9999;
  --corner-radius-medium: 4;
  --corner-radius-none: 0;
  --desktop-body-bold-font-height: "24";
  --desktop-body-bold-font-size: "16";
  --desktop-body-bold-font: var(--name-plain);
  --desktop-body-bold-weight: var(--weight-bold);
  --desktop-body-font-height: "24";
  --desktop-body-font-size: "16";
  --desktop-body-font: var(--name-plain);
  --desktop-body-weight: var(--weight-regular);
  --desktop-button-font-height: "24";
  --desktop-button-font-size: "16";
  --desktop-button-font: var(--name-brand);
  --desktop-button-weight: var(--weight-regular);
  --desktop-heading-1-font-height: "44";
  --desktop-heading-1-font-size: "32";
  --desktop-heading-1-font: var(--name-brand);
  --desktop-heading-1-weight: var(--weight-medium);
  --desktop-heading-2-font-size: "32";
  --desktop-heading-2-font: var(--name-brand);
  --desktop-heading-2-string: "44"; /* @kind other */
  --desktop-heading-2-weight: var(--weight-regular);
  --desktop-heading-3-font-height: "36";
  --desktop-heading-3-font-size: "28";
  --desktop-heading-3-font: var(--name-brand);
  --desktop-heading-3-weight: var(--weight-medium);
  --desktop-heading-4-font-height: "30";
  --desktop-heading-4-font-size: "22";
  --desktop-heading-4-font: var(--name-brand);
  --desktop-heading-4-weight: var(--weight-regular);
  --desktop-input-font-height: "24";
  --desktop-input-font-size: "16";
  --desktop-input-font: var(--name-brand);
  --desktop-input-weight: var(--weight-regular);
  --desktop-italic-font-height: "24";
  --desktop-italic-font-size: "16";
  --desktop-italic-font: var(--name-plain);
  --desktop-italic-weight: var(--weight-italic);
  --desktop-small-1-2-font-height: "20";
  --desktop-small-1-2-font-size: "14";
  --desktop-small-1-2-font: var(--name-brand);
  --desktop-small-1-2-weight: var(--weight-regular);
  --element-available-primary: var(--available-900); /* @kind color */
  --element-available-secondary: var(--available-100); /* @kind color */
  --element-brand-primary: var(--brand-primary-900); /* @kind color */
  --element-brand-rest-primary: var(--brand-50); /* @kind color */
  --element-brand-secondary: var(--brand-primary-100); /* @kind color */
  --element-brand-tertiary: var(--brand-primary-600); /* @kind color */
  --element-error-light: var(--error-100); /* @kind color */
  --element-error-primary: var(--error-900); /* @kind color */
  --element-error-secondary: var(--error-500); /* @kind color */
  --element-greys-light: var(--greys-70); /* @kind color */
  --element-greys-primary-2: var(--greys-20); /* @kind color */
  --element-greys-primary-3: var(--greys-10); /* @kind color */
  --element-greys-primary: var(--greys-20); /* @kind color */
  --element-greys-secondary: var(--greys-40); /* @kind color */
  --element-greys-tertiary: var(--greys-80); /* @kind color */
  --element-greys-white: var(--greys-120); /* @kind color */
  --element-on-brand-primary: var(--brand-primary-100); /* @kind color */
  --element-on-brand-secondary: var(--brand-primary-900); /* @kind color */
  --element-success-light: var(--success-100); /* @kind color */
  --element-success-primary: var(--success-900); /* @kind color */
  --element-success-secondary: var(--success-500); /* @kind color */
  --element-warning-light: var(--warning-100); /* @kind color */
  --element-warning-primary: var(--warning-900); /* @kind color */
  --element-warning-secondary: var(--warning-500); /* @kind color */
  --error-100: rgb(255,243,243); /* @kind color */
  --error-500: rgb(242,168,168); /* @kind color */
  --error-900: rgb(211,47,47); /* @kind color */
  --greys-100: rgb(239,239,239); /* @kind color */
  --greys-10: rgb(0,0,0); /* @kind color */
  --greys-110: rgb(241,241,241); /* @kind color */
  --greys-120: rgb(255,255,255); /* @kind color */
  --greys-20-2: rgb(33,33,33); /* @kind color */
  --greys-20: rgb(27,29,30); /* @kind color */
  --greys-30: rgb(64,64,64); /* @kind color */
  --greys-40: rgb(89,89,89); /* @kind color */
  --greys-50: rgb(101,101,101); /* @kind color */
  --greys-60: rgb(152,152,152); /* @kind color */
  --greys-70: rgb(189,189,189); /* @kind color */
  --greys-80: rgb(216,216,216); /* @kind color */
  --greys-90: rgb(229,229,229); /* @kind color */
  --mobile-body-bold-font-height: "24";
  --mobile-body-bold-font-size: "16";
  --mobile-body-bold-font: var(--name-plain);
  --mobile-body-bold-weight: var(--weight-bold);
  --mobile-body-font-height: "24";
  --mobile-body-font-size: "16";
  --mobile-body-font: var(--name-plain);
  --mobile-body-weight: var(--weight-regular);
  --mobile-button-font-height: "24";
  --mobile-button-font-size: "16";
  --mobile-button-font: var(--name-brand);
  --mobile-button-weight: var(--weight-regular);
  --mobile-captions-font-height: "36";
  --mobile-captions-font: var(--name-brand);
  --mobile-captions-string: "32"; /* @kind other */
  --mobile-captions-weight: var(--weight-medium);
  --mobile-heading-1-font-height: "36";
  --mobile-heading-1-font-size: "24";
  --mobile-heading-1-font: var(--name-brand);
  --mobile-heading-1-weight: var(--weight-medium);
  --mobile-heading-2-font-height: "36";
  --mobile-heading-2-font-size: "24";
  --mobile-heading-2-font: var(--name-brand);
  --mobile-heading-2-weight: var(--weight-regular);
  --mobile-heading-3-font-height: "30";
  --mobile-heading-3-font-size: "22";
  --mobile-heading-3-font: var(--name-brand);
  --mobile-heading-3-weight: var(--weight-medium);
  --mobile-heading-4-font-height: "26";
  --mobile-heading-4-font-size: "18";
  --mobile-heading-4-font: var(--name-brand);
  --mobile-heading-4-weight: var(--weight-regular);
  --mobile-input-font-height: "24";
  --mobile-input-font-size: "16";
  --mobile-input-font: var(--name-brand);
  --mobile-input-weight: var(--weight-regular);
  --mobile-italic-font-height: "24";
  --mobile-italic-font-size: "16";
  --mobile-italic-font: var(--name-plain);
  --mobile-italic-weight: var(--weight-italic);
  --mobile-small-1-2-font-height: "20";
  --mobile-small-1-2-font-size: "14";
  --mobile-small-1-2-font: var(--name-brand);
  --mobile-small-1-2-weight: var(--weight-regular);
  --name-brand: "Afacad"; /* @kind font */
  --name-plain: "Afacad"; /* @kind font */
  --neutral-stroke-focus-1-rest: var(--colors-neutral-white); /* @kind color */
  --neutral-stroke-focus-2-rest: var(--colors-neutral-black); /* @kind color */
  --primary-black: rgb(0,0,0); /* @kind color */
  --primary-white: rgb(255,255,255); /* @kind color */
  --success-100: rgb(223,251,223); /* @kind color */
  --success-500: rgb(129,185,129); /* @kind color */
  --success-700: rgb(22,142,22); /* @kind color */
  --success-900: rgb(18,128,18); /* @kind color */
  --surface-brand-disabled: var(--brand-primary-500); /* @kind color */
  --surface-brand-primary: var(--brand-primary-900); /* @kind color */
  --surface-brand-secondary-2: var(--brand-primary-100); /* @kind color */
  --surface-brand-secondary: var(--brand-primary-200); /* @kind color */
  --surface-brand-tertiary: var(--brand-primary-300); /* @kind color */
  --surface-greys-background: var(--greys-120); /* @kind color */
  --surface-greys-disabled: var(--greys-70); /* @kind color */
  --surface-greys-light: var(--greys-110); /* @kind color */
  --surface-greys-primary: var(--greys-10); /* @kind color */
  --surface-greys-secondary: var(--greys-120); /* @kind color */
  --surface-greys-tertiary: var(--greys-40); /* @kind color */
  --surface-greys-transparent-black-10: rgba(0,0,0,0.1); /* @kind color */
  --surface-greys-transparent-black-25: rgba(0,0,0,0.25); /* @kind color */
  --surface-greys-transparent-black-50: rgba(0,0,0,0.5); /* @kind color */
  --surface-greys-transparent-black-5: rgba(0,0,0,0.05); /* @kind color */
  --surface-greys-transparent-black-75: rgba(0,0,0,0.75); /* @kind color */
  --surface-greys-transparent-white-10: rgba(255,255,255,0.1); /* @kind color */
  --surface-greys-transparent-white-25: rgba(255,255,255,0.25); /* @kind color */
  --surface-greys-transparent-white-50: rgba(255,255,255,0.5); /* @kind color */
  --surface-greys-transparent-white-5: rgba(255,255,255,0.05); /* @kind color */
  --surface-greys-transparent-white-75: rgba(255,255,255,0.75); /* @kind color */
  --warning-100: rgb(255,247,221); /* @kind color */
  --warning-500: rgb(185,139,0); /* @kind color */
  --warning-900: rgb(139,105,0); /* @kind color */
  --weight-bold: "Bold"; /* @kind other */
  --weight-italic: "Italic"; /* @kind other */
  --weight-medium: "Medium"; /* @kind other */
  --weight-regular: "Regular"; /* @kind other */
}

:root[data-theme="dark"], .dark {
  --brand-background-2-rest: var(--colors-brand-comm-blue-20); /* @kind color */
  --brand-foreground-link-rest: var(--colors-brand-comm-blue-100); /* @kind color */
  --element-available-primary: var(--available-100); /* @kind color */
  --element-available-secondary: var(--available-900); /* @kind color */
  --element-brand-primary: var(--brand-primary-100); /* @kind color */
  --element-brand-secondary: var(--brand-primary-700); /* @kind color */
  --element-brand-tertiary: var(--brand-primary-500); /* @kind color */
  --element-error-light: var(--error-500); /* @kind color */
  --element-error-primary: var(--error-500); /* @kind color */
  --element-error-secondary: var(--error-900); /* @kind color */
  --element-greys-light: var(--greys-40); /* @kind color */
  --element-greys-primary-3: var(--greys-120); /* @kind color */
  --element-greys-secondary: var(--greys-70); /* @kind color */
  --element-greys-tertiary: var(--greys-70); /* @kind color */
  --element-greys-white: var(--greys-10); /* @kind color */
  --element-on-brand-primary: var(--brand-primary-900); /* @kind color */
  --element-on-brand-secondary: var(--brand-primary-100); /* @kind color */
  --element-success-light: var(--success-500); /* @kind color */
  --element-success-primary: var(--success-500); /* @kind color */
  --element-success-secondary: var(--success-900); /* @kind color */
  --element-warning-light: var(--warning-500); /* @kind color */
  --element-warning-primary: var(--warning-500); /* @kind color */
  --element-warning-secondary: var(--warning-900); /* @kind color */
  --neutral-stroke-focus-1-rest: var(--colors-neutral-black); /* @kind color */
  --neutral-stroke-focus-2-rest: var(--colors-neutral-white); /* @kind color */
  --surface-brand-disabled: var(--brand-primary-600); /* @kind color */
  --surface-brand-primary: var(--brand-primary-100); /* @kind color */
  --surface-brand-secondary-2: var(--brand-primary-900); /* @kind color */
  --surface-brand-secondary: var(--brand-primary-400); /* @kind color */
  --surface-brand-tertiary: var(--brand-primary-700); /* @kind color */
  --surface-greys-background: var(--greys-10); /* @kind color */
  --surface-greys-disabled: var(--greys-50); /* @kind color */
  --surface-greys-light: var(--greys-30); /* @kind color */
  --surface-greys-primary: var(--greys-120); /* @kind color */
  --surface-greys-secondary: var(--greys-10); /* @kind color */
  --surface-greys-tertiary: var(--greys-30); /* @kind color */
  --surface-greys-transparent-black-10: rgba(255,255,255,0.1); /* @kind color */
  --surface-greys-transparent-black-25: rgba(255,255,255,0.75); /* @kind color */
  --surface-greys-transparent-black-50: rgba(255,255,255,0.5); /* @kind color */
  --surface-greys-transparent-black-5: rgba(255,255,255,0.05); /* @kind color */
  --surface-greys-transparent-black-75: rgba(255,255,255,0.75); /* @kind color */
  --surface-greys-transparent-white-10: rgba(0,0,0,0.1); /* @kind color */
  --surface-greys-transparent-white-25: rgba(0,0,0,0.25); /* @kind color */
  --surface-greys-transparent-white-50: rgba(0,0,0,0.25); /* @kind color */
  --surface-greys-transparent-white-5: rgba(0,0,0,0.05); /* @kind color */
  --surface-greys-transparent-white-75: rgba(0,0,0,0.5); /* @kind color */
}

:root[data-mode="circular"] {
  --button-corner-radius: var(--corner-radius-circular);
}

:root[data-mode="square"] {
  --button-corner-radius: var(--corner-radius-none);
}

/* SPREEAI typography — clean, consumable tokens derived from the Figma "Typescale"
   variable collection (the raw string variables live in fig-tokens.css). Values are
   verbatim from the file: size / line-height in px, weight as a numeric font-weight.
   Both --font-brand and --font-plain resolve to Afacad in this system. */

:root {
  --font-brand: "Afacad", system-ui, sans-serif;
  --font-plain: "Afacad", system-ui, sans-serif;

  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* ---- Desktop scale ---- */
  --type-desktop-h1-size: 32px;
  --type-desktop-h1-line: 44px;
  --type-desktop-h1-weight: var(--fw-medium);

  --type-desktop-h2-size: 32px;
  --type-desktop-h2-line: 44px;
  --type-desktop-h2-weight: var(--fw-regular);

  --type-desktop-h3-size: 28px;
  --type-desktop-h3-line: 36px;
  --type-desktop-h3-weight: var(--fw-medium);

  --type-desktop-h4-size: 22px;
  --type-desktop-h4-line: 30px;
  --type-desktop-h4-weight: var(--fw-regular);

  --type-desktop-body-size: 16px;
  --type-desktop-body-line: 24px;
  --type-desktop-body-weight: var(--fw-regular);

  --type-desktop-body-bold-weight: var(--fw-bold);

  --type-desktop-button-size: 16px;
  --type-desktop-button-line: 24px;
  --type-desktop-button-weight: var(--fw-regular);

  --type-desktop-input-size: 16px;
  --type-desktop-input-line: 24px;

  --type-desktop-small-size: 14px;
  --type-desktop-small-line: 20px;

  /* ---- Mobile scale ---- */
  --type-mobile-h1-size: 24px;
  --type-mobile-h1-line: 36px;
  --type-mobile-h1-weight: var(--fw-medium);

  --type-mobile-h2-size: 24px;
  --type-mobile-h2-line: 36px;
  --type-mobile-h2-weight: var(--fw-regular);

  --type-mobile-h3-size: 22px;
  --type-mobile-h3-line: 30px;
  --type-mobile-h3-weight: var(--fw-medium);

  --type-mobile-h4-size: 18px;
  --type-mobile-h4-line: 26px;
  --type-mobile-h4-weight: var(--fw-regular);

  --type-mobile-caption-size: 32px;
  --type-mobile-caption-line: 36px;
  --type-mobile-caption-weight: var(--fw-medium);

  --type-mobile-body-size: 16px;
  --type-mobile-body-line: 24px;

  --type-mobile-small-size: 14px;
  --type-mobile-small-line: 20px;
}

/* ---- Utility classes ---- */
.type-h1 { font-family: var(--font-brand); font-size: var(--type-desktop-h1-size); line-height: var(--type-desktop-h1-line); font-weight: var(--type-desktop-h1-weight); }
.type-h2 { font-family: var(--font-brand); font-size: var(--type-desktop-h2-size); line-height: var(--type-desktop-h2-line); font-weight: var(--type-desktop-h2-weight); }
.type-h3 { font-family: var(--font-brand); font-size: var(--type-desktop-h3-size); line-height: var(--type-desktop-h3-line); font-weight: var(--type-desktop-h3-weight); }
.type-h4 { font-family: var(--font-brand); font-size: var(--type-desktop-h4-size); line-height: var(--type-desktop-h4-line); font-weight: var(--type-desktop-h4-weight); }
.type-body { font-family: var(--font-plain); font-size: var(--type-desktop-body-size); line-height: var(--type-desktop-body-line); font-weight: var(--type-desktop-body-weight); }
.type-body-bold { font-family: var(--font-plain); font-size: var(--type-desktop-body-size); line-height: var(--type-desktop-body-line); font-weight: var(--type-desktop-body-bold-weight); }
.type-button { font-family: var(--font-brand); font-size: var(--type-desktop-button-size); line-height: var(--type-desktop-button-line); font-weight: var(--type-desktop-button-weight); }
.type-small { font-family: var(--font-brand); font-size: var(--type-desktop-small-size); line-height: var(--type-desktop-small-line); font-weight: var(--fw-regular); }
.type-italic { font-family: var(--font-plain); font-style: italic; font-size: var(--type-desktop-body-size); line-height: var(--type-desktop-body-line); }

/* SPREEAI spacing, shape & elevation tokens.
   Spacing values are the recurring auto-layout gaps/paddings in the file
   (8, 10, 12, 16, 24, 32, 64, 80). Radii are from the "corner radius" tokens
   (none 0, medium 4) plus the card radius (5) used across product surfaces.
   Elevation values are the black-alpha shadows recorded in METADATA. */

:root {
  /* Spacing scale */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;
  --space-80: 80px;

  /* Page margins */
  --page-margin-desktop: 320px;
  --page-margin-app: 88px;
  --page-margin-mobile: 16px;

  /* Shape scale (six steps) */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;   /* corner-radius / medium */
  --radius-md: 5px;   /* product card radius */
  --radius-lg: 8px;
  --radius-full: 9999px; /* corner-radius / circular */

  /* Borders — two tiers: hairline decorative vs interactive */
  --border-decorative: 0.5px solid rgba(0, 0, 0, 0.5); /* @kind other */
  --border-interactive: 1px solid var(--brand-primary-900);
  --border-subtle: 1px solid var(--brand-primary-400);

  /* Elevation — black-alpha shadows from the file */
  --shadow-xs: 0 0 0 0.5px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.25);

  /* Overlay / frosted-glass */
  --overlay-scrim: rgba(0, 0, 0, 0.5);
  --overlay-blur: blur(50px); /* @kind other */
}