/* ==========================================================================
   Decimal Design System — UI Style (Translation Layer)
   Semantic tokens for units, corner styles, stroke styles, and effects.
   Each token maps to a primitive unit token per theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wireframe Theme (default)
   -------------------------------------------------------------------------- */
:root,
[data-theme="wireframe"] {

  /* --- Units: Fixed --- */
  --unit-fixed-min: var(--unit-0125);
  --unit-fixed-1: var(--unit-025);
  --unit-fixed-2: var(--unit-050);
  --unit-fixed-3: var(--unit-100);
  --unit-fixed-4: var(--unit-150);
  --unit-fixed-5: var(--unit-200);
  --unit-fixed-6: var(--unit-300);
  --unit-fixed-7: var(--unit-400);
  --unit-fixed-8: var(--unit-500);
  --unit-fixed-9: var(--unit-600);
  --unit-fixed-10: var(--unit-800);
  --unit-fixed-11: var(--unit-1000);
  --unit-fixed-12: var(--unit-1200);
  --unit-fixed-13: var(--unit-2000);

  /* --- Styles: Corner --- */
  --style-corner-min: var(--unit-0x);
  --style-corner-s: var(--unit-0x);
  --style-corner-m: var(--unit-050);
  --style-corner-l: var(--unit-0125);
  --style-corner-max: var(--unit-2000);

  /* --- Styles: Stroke --- */
  --style-stroke-s: var(--unit-0125);
  --style-stroke-m: var(--unit-025);
  --style-stroke-l: var(--unit-050);

  /* --- Effects: Drop Shadow Y --- */
  --effect-dropshadow-y-low: var(--unit-0x);
  --effect-dropshadow-y-medium: var(--unit-0x);
  --effect-dropshadow-y-high: var(--unit-0x);
  --effect-dropshadow-y-extrahigh: var(--unit-0x);

  /* --- Effects: Drop Shadow Blur --- */
  --effect-dropshadow-blur-low: var(--unit-0x);
  --effect-dropshadow-blur-medium: var(--unit-0x);
  --effect-dropshadow-blur-high: var(--unit-0x);
  --effect-dropshadow-blur-extrahigh: var(--unit-0x);

  /* --- Effects: Drop Shadow Spread --- */
  --effect-dropshadow-spread-low: var(--unit-0x);
  --effect-dropshadow-spread-medium: var(--unit-0x);
  --effect-dropshadow-spread-high: var(--unit-0x);
  --effect-dropshadow-spread-extrahigh: var(--unit-0x);
}

/* --------------------------------------------------------------------------
   ClientWorks Theme
   -------------------------------------------------------------------------- */
[data-theme="cw-primary"] {

  /* --- Units: Fixed --- */
  --unit-fixed-min: var(--unit-0125);
  --unit-fixed-1: var(--unit-025);
  --unit-fixed-2: var(--unit-050);
  --unit-fixed-3: var(--unit-100);
  --unit-fixed-4: var(--unit-150);
  --unit-fixed-5: var(--unit-200);
  --unit-fixed-6: var(--unit-300);
  --unit-fixed-7: var(--unit-400);
  --unit-fixed-8: var(--unit-500);
  --unit-fixed-9: var(--unit-600);
  --unit-fixed-10: var(--unit-800);
  --unit-fixed-11: var(--unit-1000);
  --unit-fixed-12: var(--unit-1200);
  --unit-fixed-13: var(--unit-2000);

  /* --- Styles: Corner --- */
  --style-corner-min: var(--unit-0x);
  --style-corner-s: var(--unit-025);
  --style-corner-m: var(--unit-050);
  --style-corner-l: var(--unit-100);
  --style-corner-max: var(--unit-2000);

  /* --- Styles: Stroke --- */
  --style-stroke-s: var(--unit-0125);
  --style-stroke-m: var(--unit-025);
  --style-stroke-l: var(--unit-050);

  /* --- Effects: Drop Shadow Y --- */
  --effect-dropshadow-y-low: var(--unit-0125);
  --effect-dropshadow-y-medium: var(--unit-025);
  --effect-dropshadow-y-high: var(--unit-500);
  --effect-dropshadow-y-extrahigh: var(--unit-100);

  /* --- Effects: Drop Shadow Blur --- */
  --effect-dropshadow-blur-low: var(--unit-025);
  --effect-dropshadow-blur-medium: var(--unit-050);
  --effect-dropshadow-blur-high: var(--unit-150);
  --effect-dropshadow-blur-extrahigh: var(--unit-200);

  /* --- Effects: Drop Shadow Spread --- */
  --effect-dropshadow-spread-low: var(--unit-0x);
  --effect-dropshadow-spread-medium: var(--unit-0x);
  --effect-dropshadow-spread-high: var(--unit-0x);
  --effect-dropshadow-spread-extrahigh: var(--unit-0x);
}

/* --------------------------------------------------------------------------
   AccountView Theme
   -------------------------------------------------------------------------- */
[data-theme="accountview"] {

  /* --- Units: Fixed --- */
  --unit-fixed-min: var(--unit-0125);
  --unit-fixed-1: var(--unit-025);
  --unit-fixed-2: var(--unit-050);
  --unit-fixed-3: var(--unit-100);
  --unit-fixed-4: var(--unit-150);
  --unit-fixed-5: var(--unit-200);
  --unit-fixed-6: var(--unit-300);
  --unit-fixed-7: var(--unit-400);
  --unit-fixed-8: var(--unit-500);
  --unit-fixed-9: var(--unit-600);
  --unit-fixed-10: var(--unit-800);
  --unit-fixed-11: var(--unit-1000);
  --unit-fixed-12: var(--unit-1200);
  --unit-fixed-13: var(--unit-2000);

  /* --- Styles: Corner --- */
  --style-corner-min: var(--unit-0x);
  --style-corner-s: var(--unit-025);
  --style-corner-m: var(--unit-050);
  --style-corner-l: var(--unit-100);
  --style-corner-max: var(--unit-2000);

  /* --- Styles: Stroke --- */
  --style-stroke-s: var(--unit-0125);
  --style-stroke-m: var(--unit-025);
  --style-stroke-l: var(--unit-050);

  /* --- Effects: Drop Shadow Y --- */
  --effect-dropshadow-y-low: var(--unit-0125);
  --effect-dropshadow-y-medium: var(--unit-025);
  --effect-dropshadow-y-high: var(--unit-500);
  --effect-dropshadow-y-extrahigh: var(--unit-100);

  /* --- Effects: Drop Shadow Blur --- */
  --effect-dropshadow-blur-low: var(--unit-025);
  --effect-dropshadow-blur-medium: var(--unit-050);
  --effect-dropshadow-blur-high: var(--unit-150);
  --effect-dropshadow-blur-extrahigh: var(--unit-200);

  /* --- Effects: Drop Shadow Spread --- */
  --effect-dropshadow-spread-low: var(--unit-0x);
  --effect-dropshadow-spread-medium: var(--unit-0x);
  --effect-dropshadow-spread-high: var(--unit-0x);
  --effect-dropshadow-spread-extrahigh: var(--unit-0x);
}