/*
 * Style Presets
 *
 * Opt-in design-language presets, activated by a data-style attribute on the
 * root. Each one re-points shape, elevation, typography,
 * density, and focus tokens to evoke a familiar system — the component CSS
 * never changes. Without the attribute everything keeps its defaults.
 *
 * Every preset pins --sigvelo-radius-scale and --sigvelo-corner-shape back to
 * their unscaled round values: the radii below are exact by design, and the
 * squircle compensation in borders.css would distort them.
 *
 * Deliberately not part of index.css: import
 * "@mcp-b/design-tokens/style-presets" after the main tokens to opt in.
 */

/* Clean — Radix / shadcn. Balanced radii, system font, understated depth. */
:root[data-style="clean"] {
  --sigvelo-radius-scale: 1;
  --sigvelo-corner-shape: round;
  --sigvelo-radius-xs-base: 0.125rem; /* 2px */
  --sigvelo-radius-sm-base: 0.25rem; /* 4px */
  --sigvelo-radius-md-base: 0.375rem; /* 6px */
  --sigvelo-radius-lg-base: 0.5rem; /* 8px */
  --sigvelo-radius-xl-base: 0.75rem; /* 12px */
  --sigvelo-radius-2xl-base: 1rem; /* 16px */
  --sigvelo-radius-3xl-base: 1.25rem; /* 20px */

  --sigvelo-elevation-raised-light:
    var(--sigvelo-elevation-hairline-light), 0 1px 3px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%);
  --sigvelo-elevation-raised-dark:
    var(--sigvelo-elevation-hairline-dark), 0 1px 3px rgb(0 0 0 / 24%), 0 1px 2px rgb(0 0 0 / 12%);
  --sigvelo-elevation-floating-light:
    var(--sigvelo-elevation-hairline-light), 0 2px 8px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%);
  --sigvelo-elevation-floating-dark:
    var(--sigvelo-elevation-hairline-dark), 0 2px 8px rgb(0 0 0 / 28%), 0 1px 2px rgb(0 0 0 / 14%);
  --sigvelo-elevation-overlay-light: 0 0 1px rgb(0 0 0 / 62%), 0 4px 16px rgb(0 0 0 / 12%);
  --sigvelo-elevation-overlay-dark: 0 0 1px rgb(255 255 255 / 14%), 0 4px 16px rgb(0 0 0 / 35%);

  --sigvelo-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sigvelo-font-weight-semibold: 500;

  --sigvelo-control-height-xs: var(--sigvelo-spacing-6); /* 24px */
  --sigvelo-control-height-sm: var(--sigvelo-spacing-8); /* 32px */
  --sigvelo-control-height-md: var(--sigvelo-spacing-10); /* 40px */
  --sigvelo-control-height-lg: var(--sigvelo-spacing-12); /* 48px */
  --sigvelo-control-height-xl: var(--sigvelo-spacing-14); /* 56px */

  --sigvelo-focus-width: 2px;
  --sigvelo-focus-offset: 2px;
}

/* Material — Material Design 3. Expressive radii, elevation does the work. */
:root[data-style="material"] {
  --sigvelo-radius-scale: 1;
  --sigvelo-corner-shape: round;
  --sigvelo-radius-xs-base: 0.25rem; /* 4px */
  --sigvelo-radius-sm-base: 0.5rem; /* 8px */
  --sigvelo-radius-md-base: 0.75rem; /* 12px */
  --sigvelo-radius-lg-base: 1rem; /* 16px */
  --sigvelo-radius-xl-base: 1.75rem; /* 28px */
  --sigvelo-radius-2xl-base: 1.75rem; /* 28px */
  --sigvelo-radius-3xl-base: 1.75rem; /* 28px */

  --sigvelo-elevation-raised-light: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
  --sigvelo-elevation-raised-dark:
    var(--sigvelo-elevation-hairline-dark), 0 1px 2px rgb(0 0 0 / 30%),
    0 2px 6px 2px rgb(0 0 0 / 15%);
  --sigvelo-elevation-floating-light: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px rgb(0 0 0 / 30%);
  --sigvelo-elevation-floating-dark:
    var(--sigvelo-elevation-hairline-dark), 0 4px 8px 3px rgb(0 0 0 / 15%),
    0 1px 3px rgb(0 0 0 / 30%);
  --sigvelo-elevation-overlay-light: 0 6px 10px 4px rgb(0 0 0 / 15%), 0 2px 3px rgb(0 0 0 / 30%);
  --sigvelo-elevation-overlay-dark:
    0 0 1px rgb(255 255 255 / 14%), 0 6px 10px 4px rgb(0 0 0 / 15%), 0 2px 3px rgb(0 0 0 / 30%);

  --sigvelo-font-sans: Roboto, "Google Sans", system-ui, sans-serif;
  --sigvelo-font-weight-semibold: 500;

  --sigvelo-control-height-xs: var(--sigvelo-spacing-7); /* 28px */
  --sigvelo-control-height-sm: var(--sigvelo-spacing-9); /* 36px */
  --sigvelo-control-height-md: var(--sigvelo-spacing-11); /* 44px */
  --sigvelo-control-height-lg: var(--sigvelo-spacing-14); /* 56px */
  --sigvelo-control-height-xl: var(--sigvelo-spacing-16); /* 64px */

  --sigvelo-focus-width: 3px;
  --sigvelo-focus-offset: 2px;
}

/* Fluent — Fluent UI. Restrained radii, compact density, Segoe UI. */
:root[data-style="fluent"] {
  --sigvelo-radius-scale: 1;
  --sigvelo-corner-shape: round;
  --sigvelo-radius-xs-base: 0.125rem; /* 2px */
  --sigvelo-radius-sm-base: 0.25rem; /* 4px */
  --sigvelo-radius-md-base: 0.25rem; /* 4px */
  --sigvelo-radius-lg-base: 0.5rem; /* 8px */
  --sigvelo-radius-xl-base: 0.75rem; /* 12px */
  --sigvelo-radius-2xl-base: 1rem; /* 16px */
  --sigvelo-radius-3xl-base: 1rem; /* 16px */

  --sigvelo-elevation-raised-light: 0 1.6px 3.6px rgb(0 0 0 / 13%), 0 0.3px 0.9px rgb(0 0 0 / 11%);
  --sigvelo-elevation-raised-dark:
    var(--sigvelo-elevation-hairline-dark), 0 1.6px 3.6px rgb(0 0 0 / 13%),
    0 0.3px 0.9px rgb(0 0 0 / 11%);
  --sigvelo-elevation-floating-light:
    0 3.2px 7.2px rgb(0 0 0 / 13%), 0 0.6px 1.8px rgb(0 0 0 / 11%);
  --sigvelo-elevation-floating-dark:
    var(--sigvelo-elevation-hairline-dark), 0 3.2px 7.2px rgb(0 0 0 / 13%),
    0 0.6px 1.8px rgb(0 0 0 / 11%);
  --sigvelo-elevation-overlay-light:
    0 6.4px 14.4px rgb(0 0 0 / 13%), 0 1.2px 3.6px rgb(0 0 0 / 11%);
  --sigvelo-elevation-overlay-dark:
    0 0 1px rgb(255 255 255 / 14%), 0 6.4px 14.4px rgb(0 0 0 / 13%), 0 1.2px 3.6px rgb(0 0 0 / 11%);

  --sigvelo-font-sans: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --sigvelo-font-weight-semibold: 600;

  --sigvelo-control-height-xs: var(--sigvelo-spacing-6); /* 24px */
  --sigvelo-control-height-sm: var(--sigvelo-spacing-7); /* 28px */
  --sigvelo-control-height-md: var(--sigvelo-spacing-8); /* 32px */
  --sigvelo-control-height-lg: var(--sigvelo-spacing-10); /* 40px */
  --sigvelo-control-height-xl: var(--sigvelo-spacing-12); /* 48px */

  --sigvelo-focus-width: 2px;
  --sigvelo-focus-offset: 1px;
}

/* Base — Base UI. Sharp edges, hairline separation, zero decoration. */
:root[data-style="base"] {
  --sigvelo-radius-scale: 1;
  --sigvelo-corner-shape: round;
  --sigvelo-radius-xs-base: 0px;
  --sigvelo-radius-sm-base: 0px;
  --sigvelo-radius-md-base: 0px;
  --sigvelo-radius-lg-base: 0px;
  --sigvelo-radius-xl-base: 0px;
  --sigvelo-radius-2xl-base: 0px;
  --sigvelo-radius-3xl-base: 0px;

  /* Shadowless: surfaces separate by ring alone, overlays by a full outline. */
  --sigvelo-elevation-raised-light: var(--sigvelo-elevation-hairline-light);
  --sigvelo-elevation-raised-dark: var(--sigvelo-elevation-hairline-dark);
  --sigvelo-elevation-floating-light: var(--sigvelo-elevation-hairline-light);
  --sigvelo-elevation-floating-dark: var(--sigvelo-elevation-hairline-dark);
  --sigvelo-elevation-overlay-light: 0 0 0 1px rgb(0 0 0 / 15%);
  --sigvelo-elevation-overlay-dark: 0 0 0 1px rgb(255 255 255 / 20%);

  --sigvelo-font-sans: system-ui, sans-serif;
  --sigvelo-font-weight-semibold: 500;

  --sigvelo-control-height-xs: var(--sigvelo-spacing-7); /* 28px */
  --sigvelo-control-height-sm: var(--sigvelo-spacing-9); /* 36px */
  --sigvelo-control-height-md: var(--sigvelo-spacing-10); /* 40px */
  --sigvelo-control-height-lg: var(--sigvelo-spacing-12); /* 48px */
  --sigvelo-control-height-xl: var(--sigvelo-spacing-14); /* 56px */

  --sigvelo-focus-width: 2px;
  --sigvelo-focus-offset: 2px;
}

/* Playful — generous radii, bold type, warm prominent shadows. */
:root[data-style="playful"] {
  --sigvelo-radius-scale: 1;
  --sigvelo-corner-shape: round;
  --sigvelo-radius-xs-base: 0.25rem; /* 4px */
  --sigvelo-radius-sm-base: 0.5rem; /* 8px */
  --sigvelo-radius-md-base: 0.5rem; /* 8px */
  --sigvelo-radius-lg-base: 1rem; /* 16px */
  --sigvelo-radius-xl-base: 1.25rem; /* 20px */
  --sigvelo-radius-2xl-base: 1.5rem; /* 24px */
  --sigvelo-radius-3xl-base: 1.75rem; /* 28px */

  --sigvelo-elevation-raised-light:
    var(--sigvelo-elevation-hairline-light), 0 4px 8px rgb(0 0 0 / 8%);
  --sigvelo-elevation-raised-dark:
    var(--sigvelo-elevation-hairline-dark), 0 4px 8px rgb(0 0 0 / 24%);
  --sigvelo-elevation-floating-light:
    var(--sigvelo-elevation-hairline-light), 0 6px 20px rgb(0 0 0 / 10%);
  --sigvelo-elevation-floating-dark:
    var(--sigvelo-elevation-hairline-dark), 0 6px 20px rgb(0 0 0 / 30%);
  --sigvelo-elevation-overlay-light: 0 0 1px rgb(0 0 0 / 62%), 0 10px 30px rgb(0 0 0 / 14%);
  --sigvelo-elevation-overlay-dark: 0 0 1px rgb(255 255 255 / 14%), 0 10px 30px rgb(0 0 0 / 40%);

  --sigvelo-font-sans: "Figtree", "Poppins", system-ui, sans-serif;
  --sigvelo-font-weight-semibold: 600;

  --sigvelo-control-height-xs: var(--sigvelo-spacing-7); /* 28px */
  --sigvelo-control-height-sm: var(--sigvelo-spacing-9); /* 36px */
  --sigvelo-control-height-md: var(--sigvelo-spacing-11); /* 44px */
  --sigvelo-control-height-lg: var(--sigvelo-spacing-12); /* 48px */
  --sigvelo-control-height-xl: var(--sigvelo-spacing-16); /* 64px */

  --sigvelo-focus-width: 3px;
  --sigvelo-focus-offset: 2px;
}