/* ==========================================================================
   Decimal Design System — Typography (Translation Layer)
   Semantic typography tokens that map to primitives or raw values per theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font Size, Line Height & Letter Spacing
   These raw-value tokens are currently identical across all themes.
   Defined once in :root; individual themes can override if needed.
   -------------------------------------------------------------------------- */
:root {

  /* --- Font Size: Utility Label --- */
  --font-fixed-size-utility-label-1: 12px;
  --font-fixed-size-utility-label-2: 14px;
  --font-fixed-size-utility-label-3: 16px;

  /* --- Font Size: Utility Supplemental --- */
  --font-fixed-size-utility-supplemental-1: 8px;
  --font-fixed-size-utility-supplemental-2: 12px;
  --font-fixed-size-utility-supplemental-3: 14px;

  /* --- Font Size: Body --- */
  --font-fixed-size-body-1: 14px;
  --font-fixed-size-body-2: 16px;

  /* --- Font Size: Heading --- */
  --font-fixed-size-heading-1: 14px;
  --font-fixed-size-heading-2: 16px;
  --font-fixed-size-heading-3: 20px;
  --font-fixed-size-heading-4: 28px;
  --font-fixed-size-heading-5: 32px;
  --font-fixed-size-heading-6: 42px;
  --font-fixed-size-heading-7: 54px;

  /* --- Line Height: Utility Label --- */
  --font-fixed-lineheight-utility-label-1: 16px;
  --font-fixed-lineheight-utility-label-2: 18px;
  --font-fixed-lineheight-utility-label-3: 24px;

  /* --- Line Height: Utility Supplemental --- */
  --font-fixed-lineheight-utility-supplemental-1: 8px;
  --font-fixed-lineheight-utility-supplemental-2: 16px;
  --font-fixed-lineheight-utility-supplemental-3: 18px;

  /* --- Line Height: Body --- */
  --font-fixed-lineheight-body-1: 20px;
  --font-fixed-lineheight-body-2: 24px;
  --font-fixed-lineheight-body-compact-1: 18px;
  --font-fixed-lineheight-body-compact-2: 22px;

  /* --- Line Height: Header --- */
  --font-fixed-lineheight-header-1: 20px;
  --font-fixed-lineheight-header-2: 24px;
  --font-fixed-lineheight-header-3: 28px;
  --font-fixed-lineheight-header-4: 36px;
  --font-fixed-lineheight-header-5: 40px;
  --font-fixed-lineheight-header-6: 50px;
  --font-fixed-lineheight-header-7: 64px;
  --font-fixed-lineheight-header-compact-1: 18px;
  --font-fixed-lineheight-header-compact-2: 22px;

  /* --- Letter Spacing: Utility Label --- */
  --font-fixed-letterspacing-utility-label-1: 0.32px;
  --font-fixed-letterspacing-utility-label-2: 0.16px;
  --font-fixed-letterspacing-utility-label-3: 0px;

  /* --- Letter Spacing: Utility Supplemental --- */
  --font-fixed-letterspacing-utility-supplemental-1: 0.8px;
  --font-fixed-letterspacing-utility-supplemental-2: 0.16px;
  --font-fixed-letterspacing-utility-supplemental-3: 0.32px;

  /* --- Letter Spacing: Body --- */
  --font-fixed-letterspacing-body-1: 0.16px;
  --font-fixed-letterspacing-body-2: 0px;

  /* --- Letter Spacing: Heading --- */
  --font-fixed-letterspacing-heading-1: 0.16px;
  --font-fixed-letterspacing-heading-2: 0px;
  --font-fixed-letterspacing-heading-3: 0px;
  --font-fixed-letterspacing-heading-4: 0px;
  --font-fixed-letterspacing-heading-5: 0px;
  --font-fixed-letterspacing-heading-6: 0px;
  --font-fixed-letterspacing-heading-7: 0px;
}

/* --------------------------------------------------------------------------
   Wireframe Theme (default)
   Font family & weight tokens that reference primitives.
   -------------------------------------------------------------------------- */
:root,
[data-theme="wireframe"] {

  /* --- Font Family --- */
  --font-family-brand: var(--font-family-robotomono);
  --font-family-base: var(--font-family-robotomono);
  --font-family-tabular-numeric-data: var(--font-family-robotomono);

  /* --- Font Weight: Utility Label --- */
  --font-fixed-weight-utility-label-1: var(--font-weight-regular);
  --font-fixed-weight-utility-label-1-prominent: var(--font-weight-medium);
  --font-fixed-weight-utility-label-1-tabular-numeric-data: var(--font-weight-regular);
  --font-fixed-weight-utility-label-2: var(--font-weight-regular);
  --font-fixed-weight-utility-label-2-prominent: var(--font-weight-medium);
  --font-fixed-weight-utility-label-2-tabular-numeric-data: var(--font-weight-regular);
  --font-fixed-weight-utility-label-3: var(--font-weight-regular);
  --font-fixed-weight-utility-label-3-prominent: var(--font-weight-medium);
  --font-fixed-weight-utility-label-3-tabular-numeric-data: var(--font-weight-regular);

  /* --- Font Weight: Utility Supplemental --- */
  --font-fixed-weight-utility-supplemental-1: var(--font-weight-bold);
  --font-fixed-weight-utility-supplemental-2: var(--font-weight-regular);
  --font-fixed-weight-utility-supplemental-3: var(--font-weight-regular);

  /* --- Font Weight: Body --- */
  --font-fixed-weight-body-1: var(--font-weight-regular);
  --font-fixed-weight-body-2: var(--font-weight-regular);

  /* --- Font Weight: Heading --- */
  --font-fixed-weight-heading-1: var(--font-weight-bold);
  --font-fixed-weight-heading-2: var(--font-weight-bold);
  --font-fixed-weight-heading-3: var(--font-weight-medium);
  --font-fixed-weight-heading-4: var(--font-weight-medium);
  --font-fixed-weight-heading-5: var(--font-weight-regular);
  --font-fixed-weight-heading-6: var(--font-weight-regular);
  --font-fixed-weight-heading-7: var(--font-weight-regular);
}

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

  /* --- Font Family --- */
  --font-family-brand: var(--font-family-roboto);
  --font-family-base: var(--font-family-roboto);
  --font-family-tabular-numeric-data: var(--font-family-roboto);

  /* --- Font Weight: Utility Label --- */
  --font-fixed-weight-utility-label-1: var(--font-weight-regular);
  --font-fixed-weight-utility-label-1-prominent: var(--font-weight-medium);
  --font-fixed-weight-utility-label-1-tabular-numeric-data: var(--font-weight-regular);
  --font-fixed-weight-utility-label-2: var(--font-weight-regular);
  --font-fixed-weight-utility-label-2-prominent: var(--font-weight-medium);
  --font-fixed-weight-utility-label-2-tabular-numeric-data: var(--font-weight-regular);
  --font-fixed-weight-utility-label-3: var(--font-weight-regular);
  --font-fixed-weight-utility-label-3-prominent: var(--font-weight-medium);
  --font-fixed-weight-utility-label-3-tabular-numeric-data: var(--font-weight-regular);

  /* --- Font Weight: Utility Supplemental --- */
  --font-fixed-weight-utility-supplemental-1: var(--font-weight-bold);
  --font-fixed-weight-utility-supplemental-2: var(--font-weight-regular);
  --font-fixed-weight-utility-supplemental-3: var(--font-weight-regular);

  /* --- Font Weight: Body --- */
  --font-fixed-weight-body-1: var(--font-weight-regular);
  --font-fixed-weight-body-2: var(--font-weight-regular);

  /* --- Font Weight: Heading --- */
  --font-fixed-weight-heading-1: var(--font-weight-bold);
  --font-fixed-weight-heading-2: var(--font-weight-bold);
  --font-fixed-weight-heading-3: var(--font-weight-medium);
  --font-fixed-weight-heading-4: var(--font-weight-medium);
  --font-fixed-weight-heading-5: var(--font-weight-regular);
  --font-fixed-weight-heading-6: var(--font-weight-regular);
  --font-fixed-weight-heading-7: var(--font-weight-regular);
}

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

  /* --- Font Family --- */
  --font-family-brand: var(--font-family-opensans);
  --font-family-base: var(--font-family-opensans);
  --font-family-tabular-numeric-data: var(--font-family-opensans);

  /* --- Font Weight: Utility Label --- */
  --font-fixed-weight-utility-label-1: var(--font-weight-regular);
  --font-fixed-weight-utility-label-1-prominent: var(--font-weight-semibold);
  --font-fixed-weight-utility-label-1-tabular-numeric-data: var(--font-weight-regular);
  --font-fixed-weight-utility-label-2: var(--font-weight-regular);
  --font-fixed-weight-utility-label-2-prominent: var(--font-weight-semibold);
  --font-fixed-weight-utility-label-2-tabular-numeric-data: var(--font-weight-regular);
  --font-fixed-weight-utility-label-3: var(--font-weight-regular);
  --font-fixed-weight-utility-label-3-prominent: var(--font-weight-semibold);
  --font-fixed-weight-utility-label-3-tabular-numeric-data: var(--font-weight-regular);

  /* --- Font Weight: Utility Supplemental --- */
  --font-fixed-weight-utility-supplemental-1: var(--font-weight-bold);
  --font-fixed-weight-utility-supplemental-2: var(--font-weight-regular);
  --font-fixed-weight-utility-supplemental-3: var(--font-weight-regular);

  /* --- Font Weight: Body --- */
  --font-fixed-weight-body-1: var(--font-weight-regular);
  --font-fixed-weight-body-2: var(--font-weight-regular);

  /* --- Font Weight: Heading --- */
  --font-fixed-weight-heading-1: var(--font-weight-bold);
  --font-fixed-weight-heading-2: var(--font-weight-bold);
  --font-fixed-weight-heading-3: var(--font-weight-semibold);
  --font-fixed-weight-heading-4: var(--font-weight-semibold);
  --font-fixed-weight-heading-5: var(--font-weight-regular);
  --font-fixed-weight-heading-6: var(--font-weight-regular);
  --font-fixed-weight-heading-7: var(--font-weight-regular);
}