/*
 * Prototype skins for draft V2 - "Soft", "Rund", "Fein" (owner, 2026-10-20).
 *
 * NOT part of the system. They show what a skin file would set, using only the
 * properties the skin surface already has (SPEC 5.2). Where a look needs a property
 * the surface lacks, the rule says so; that would be a change to the system.
 *
 * Since V2 every variant holds WCAG 2.2 AA (owner, 2026-10-20). "Fein" keeps the
 * field border of its brand (3 : 1) instead of shadcn's 1.27 : 1.
 */

/* Soft and Fein loosen colours like lumen: AA text and accent pairs. */
@layer sw.tokens.skin {
  /* Pur keeps the colours of Klar (base, AAA): the same mapping, under its own name. */
  [data-sw-skin="pure"] {
    --sw-color-accent-default: var(--sw-color-accent-default--scheme);
    --sw-color-accent-hover: var(--sw-color-accent-hover--scheme);
    --sw-color-accent-pressed: var(--sw-color-accent-pressed--scheme);
    --sw-color-border-focus: var(--sw-color-border-focus--scheme);
    --sw-color-border-interactive: var(--sw-color-border-interactive--scheme);
    --sw-color-status-danger-hover: var(--sw-color-status-danger-hover--scheme);
    --sw-color-status-danger-solid: var(--sw-color-status-danger-solid--scheme);
    --sw-color-status-danger-text: var(--sw-color-status-danger-text--scheme);
    --sw-color-status-info-solid: var(--sw-color-status-info-solid--scheme);
    --sw-color-status-info-text: var(--sw-color-status-info-text--scheme);
    --sw-color-status-success-solid: var(--sw-color-status-success-solid--scheme);
    --sw-color-status-success-text: var(--sw-color-status-success-text--scheme);
    --sw-color-status-warning-solid: var(--sw-color-status-warning-solid--scheme);
    --sw-color-status-warning-text: var(--sw-color-status-warning-text--scheme);
    --sw-color-text-accent: var(--sw-color-text-accent--scheme);
    --sw-color-text-accent-active: var(--sw-color-text-accent-active--scheme);
    --sw-color-text-link: var(--sw-color-text-link--scheme);
    --sw-color-text-link-hover: var(--sw-color-text-link-hover--scheme);
    --sw-color-text-link-pressed: var(--sw-color-text-link-pressed--scheme);
    --sw-color-text-primary: var(--sw-color-text-primary--scheme);
    --sw-color-text-primary-active: var(--sw-color-text-primary-active--scheme);
    --sw-color-text-secondary--skin: var(--sw-color-text-secondary--scheme);
    --sw-color-text-secondary: var(--sw-color-text-secondary--scheme);
  }

  :is([data-sw-skin="soft"], [data-sw-skin="fine"]) {
    --sw-color-accent-default: var(--sw-color-aa-accent-default);
    --sw-color-accent-hover: var(--sw-color-aa-accent-hover);
    --sw-color-accent-pressed: var(--sw-color-aa-accent-pressed);
    --sw-color-text-secondary--skin: var(--sw-color-aa-text-secondary);
    --sw-color-text-secondary: var(--sw-color-aa-text-secondary);
    --sw-color-text-link: var(--sw-color-aa-text-link);
  }
}

@layer sw.base {
  /* Soft - HeroUI: small soft shadows on nearly every part. */
  [data-sw-skin="soft"] {
    --sw-skin-radius-control: var(--sw-radius-xl);
    --sw-skin-radius-surface: calc(var(--sw-radius-2xl) * 1.25);
    --sw-skin-radius-pill: var(--sw-radius-xl);
    --sw-skin-border-width: var(--sw-border-width-thin);
    --sw-skin-shadow-raised: 0 0 0 1px rgb(0 0 0 / 0.02), 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px -2px rgb(0 0 0 / 0.05);
    --sw-skin-shadow-overlay: 0 12px 32px -8px rgb(0 0 0 / 0.2), 0 4px 10px -4px rgb(0 0 0 / 0.1);
    --sw-skin-shadow-button: 0 1px 2px rgb(0 0 0 / 0.1), 0 2px 6px -1px rgb(0 0 0 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.12);
    --sw-skin-label-weight: var(--sw-font-weight-medium);
    --sw-skin-control-weight: var(--sw-font-weight-medium);
    --sw-skin-control-xs: var(--sw-space-3);
    --sw-skin-control-sm: var(--sw-space-4);
    --sw-skin-control-md: var(--sw-space-5);
    --sw-skin-control-lg: var(--sw-space-6);
    --sw-skin-control-xl: calc(var(--sw-space-3) + var(--sw-space-4));
    --sw-skin-touch-scale: 1.25;
    --sw-skin-target-compact: var(--sw-target-compact);
    --sw-skin-target-comfortable: var(--sw-target-compact);
    --sw-skin-target-spacious: var(--sw-target-comfortable);
  }
  /* Missing from the skin surface: a shadow on the field box. */
  [data-sw-skin="soft"] .sw-field__box {
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 2px 6px -2px rgb(0 0 0 / 0.05);
  }
  [data-sw-skin="soft"] .sw-button[data-variant="secondary"] {
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 6px -2px rgb(0 0 0 / 0.07);
  }

  /*
   * Pur - Klar without outlines (owner, 2026-10-20). Geometry copied from the base
   * skin, so a tile in Pur looks the same on a page in any other skin. What changes
   * is drawn in the components layer below and, for the page itself, in entwurf.css.
   * Field borders stay: they are what makes a field a field (AA, 1.4.11).
   */
  [data-sw-skin="pure"] {
    --sw-skin-radius-control: var(--sw-radius-lg);
    --sw-skin-radius-surface: var(--sw-radius-xl);
    --sw-skin-radius-pill: var(--sw-radius-lg);
    --sw-skin-border-width: var(--sw-border-width-thin);
    --sw-skin-shadow-raised: none;
    --sw-skin-shadow-overlay: 0 8px 28px rgb(0 0 0 / 0.55);
    --sw-skin-shadow-button: none;
    --sw-skin-label-weight: var(--sw-font-weight-semibold);
    --sw-skin-control-weight: var(--sw-font-weight-semibold);
    --sw-skin-control-xs: var(--sw-space-3);
    --sw-skin-control-sm: var(--sw-space-4);
    --sw-skin-control-md: var(--sw-target-comfortable);
    --sw-skin-control-lg: calc(var(--sw-space-3) + var(--sw-space-4));
    --sw-skin-control-xl: var(--sw-space-8);
    --sw-skin-touch-scale: 1;
    --sw-skin-target-compact: var(--sw-target-compact);
    --sw-skin-target-comfortable: var(--sw-target-comfortable);
    --sw-skin-target-spacious: var(--sw-target-spacious);
  }

  /* Rund - pill buttons, round corners everywhere; base heights stay. */
  [data-sw-skin="round"] {
    --sw-skin-radius-control: var(--sw-radius-2xl);
    --sw-skin-radius-surface: calc(var(--sw-radius-2xl) * 1.5);
    --sw-skin-radius-pill: var(--sw-radius-full);
    --sw-skin-shadow-raised: 0 1px 3px rgb(0 0 0 / 0.05);
  }

  /* Fein - shadcn: smaller and lighter, 36 px controls, 6 px corners. */
  [data-sw-skin="fine"] {
    --sw-skin-radius-control: var(--sw-radius-md);
    --sw-skin-radius-surface: var(--sw-radius-xl);
    --sw-skin-radius-pill: var(--sw-radius-md);
    --sw-skin-border-width: var(--sw-border-width-thin);
    --sw-skin-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.04);
    --sw-skin-shadow-overlay: 0 8px 24px -6px rgb(0 0 0 / 0.16);
    --sw-skin-shadow-button: 0 1px 2px rgb(0 0 0 / 0.05);
    --sw-skin-label-weight: var(--sw-font-weight-medium);
    --sw-skin-control-weight: var(--sw-font-weight-medium);
    --sw-skin-control-xs: var(--sw-space-3);
    --sw-skin-control-sm: calc(var(--sw-space-3) + var(--sw-space-05));
    --sw-skin-control-md: calc(var(--sw-space-4) + var(--sw-space-05));
    --sw-skin-control-lg: var(--sw-space-5);
    --sw-skin-control-xl: var(--sw-space-6);
    --sw-skin-touch-scale: 1.25;
    --sw-skin-target-compact: var(--sw-target-compact);
    --sw-skin-target-comfortable: var(--sw-target-compact);
    --sw-skin-target-spacious: var(--sw-target-comfortable);
  }
  /* Missing from the skin surface: a smaller type size inside controls. */
  [data-sw-skin="fine"] :is(.sw-field__input, .sw-select__value, .sw-button__label, .sw-switch__label, .sw-choice__label) {
    font-size: var(--sw-font-size-sm);
  }

  /*
   * Two axes only the configurator of the draft has: radius and icon style. In the
   * system the skin owns both; as axes of their own they would be new dimensions.
   */
  [data-e-radius="none"] { --sw-skin-radius-control: 0px; --sw-skin-radius-surface: 0px; --sw-skin-radius-pill: 0px; }
  [data-e-radius="sm"] { --sw-skin-radius-control: var(--sw-radius-sm); --sw-skin-radius-surface: var(--sw-radius-md); --sw-skin-radius-pill: var(--sw-radius-sm); }
  [data-e-radius="lg"] { --sw-skin-radius-control: var(--sw-radius-xl); --sw-skin-radius-surface: calc(var(--sw-radius-2xl) * 1.25); --sw-skin-radius-pill: var(--sw-radius-xl); }
  [data-e-radius="full"] { --sw-skin-radius-control: var(--sw-radius-2xl); --sw-skin-radius-surface: calc(var(--sw-radius-2xl) * 1.5); --sw-skin-radius-pill: var(--sw-radius-full); }

  [data-e-icons="hair"] { --sw-icon-stroke: 1; }
  [data-e-icons="thin"] { --sw-icon-stroke: 1.5; }
  [data-e-icons="bold"] { --sw-icon-stroke: 2.5; }
  [data-e-icons="heavy"] { --sw-icon-stroke: 3; }
  /*
   * Duoton and Gefüllt fill only the closed shapes; Lucide has no filled set. The
   * rules are written by entwurf.js, which measures each icon. Inner lines are cut out
   * in the colour of the surface the icon sits on.
   */
  :is(.sw-button[data-variant="primary"], .e-btn--primary, .e-icon:hover) { --e-knockout: var(--sw-color-accent-default); }
  :is(.e-nav, .e-qseg, .e-picker) { --e-knockout: var(--e-quiet-track); }
}

/*
 * Pur in the components: a card is told by its surface, not by an edge. Missing from
 * the skin surface: a property for the card edge (today it is border.subtle, which
 * table rows and dividers share).
 */
@layer sw.components {
  [data-sw-skin="pure"] .sw-card:not([data-variant="outlined"]) { --sw-card-edge: transparent; }
}

/*
 * Type presets of the configurator (draft only, owner 2026-10-20). Only Inter ships
 * with the system; the others are fonts every computer has, so nothing is loaded.
 * "Lesbar" is the system's legible stack (Atkinson Hyperlegible Next, not shipped)
 * with Verdana as the fallback that is actually there. Unlayered on purpose: it
 * overrides the token of the root.
 */
:root[data-e-font="system"] { --sw-font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
:root[data-e-font="legible"] { --sw-font-family-sans: "Atkinson Hyperlegible Next", Verdana, "Inter", system-ui, sans-serif; --e-head-track: -0.01em; }
:root[data-e-font="editorial"] {
  --e-font-head: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --e-head-scale: 1.08; --e-head-track: -0.015em; --e-head-weight: 600;
}
:root[data-e-font="tech"] {
  --e-font-head: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --e-head-scale: 0.82; --e-head-track: -0.03em; --e-head-weight: 700;
}