@use 'sass:map';

// variable names
$vh100-var: --vh100; // variable to use for 100vh.

$top-banner-height-var: --dbx-top-banner-height;
$bottom-banner-height-var: --dbx-bottom-banner-height;

$page-navbar-height-var: --dbx-page-navbar-height;
$content-navbar-height-var: --dbx-content-navbar-height;

$box-max-width-var: --dbx-box-max-width;
$content-max-width-var: --dbx-content-max-width;

/// Padding step 0 — zero spacing. Useful as a reset value where a tier is required.
/// @intent zero spacing, padding 0, no padding
/// @role spacing
$padding-0-var: --dbx-padding-0;
/// Padding step 1 — tightest spacing tier. Use between adjacent inline elements.
/// @intent tight spacing, padding 1, 2px spacing
/// @role spacing
/// @utility .dbx-p1, .dbx-mb1
$padding-1-var: --dbx-padding-1;
/// Padding step 2 — small spacing tier. Use between sibling form rows or chip lists.
/// @intent small spacing, padding 2, 6px spacing
/// @role spacing
/// @utility .dbx-p2, .dbx-mb2
$padding-2-var: --dbx-padding-2;
/// Padding step 3 — default content padding. The canonical "card padding" / "section gap".
/// @intent section gap, default padding, card padding, 12px spacing, padding 3
/// @role spacing
/// @anti-use Don't hardcode `padding: 12px` — reach for this var or a `.dbx-p3` utility.
/// @utility .dbx-p3, .dbx-mb3, .dbx-mt3
$padding-3-var: --dbx-padding-3;
/// Padding step 4 — emphasised spacing. Use between top-level sections.
/// @intent emphasised spacing, padding 4, 18px spacing
/// @role spacing
/// @utility .dbx-p4, .dbx-mb4
$padding-4-var: --dbx-padding-4;
/// Padding step 5 — page padding. Use around full-width page surfaces.
/// @intent page padding, padding 5, 24px spacing
/// @role spacing
/// @utility .dbx-p5, .dbx-mb5
$padding-5-var: --dbx-padding-5;

/// Shadow gutter — the room a clipping/scrolling container must reserve INSIDE its
/// padding box so an elevated child's `box-shadow` isn't clipped at the edge.
/// Sized against Material's raised-button elevation: the resting shadow reaches
/// 2.5px below the border box and the hover shadow reaches 5px, so 4px clears the
/// resting state outright and all but the faintest 12% hover layer. Raise it to 5px
/// to clear hover completely, or set it to 0px to opt out.
/// @intent shadow gutter, elevation room, keep box-shadow from being clipped
/// @role spacing
$shadow-gutter-var: --dbx-shadow-gutter;

$two-column-left-width-var: --dbx-two-column-left-width;

$dbx-color-var: --dbx-color-current;
$dbx-bg-color-var: --dbx-bg-color-current;
$dbx-bg-tone-var: --dbx-color-bg-tone;

/// dbx primary brand color. Aliased from `--mat-sys-primary` so theme switches flow through.
/// @intent primary color, brand color, primary action color
/// @role color
/// @see --mat-sys-primary
$dbx-primary-color-var: --dbx-primary-color;
/// dbx secondary brand color. Aliased from `--mat-sys-secondary`.
/// @intent secondary color, supporting accent
/// @role color
/// @see --mat-sys-secondary
$dbx-secondary-color-var: --dbx-secondary-color;
/// dbx tertiary brand color. Aliased from `--mat-sys-tertiary`.
/// @intent tertiary color, accent color
/// @role color
/// @see --mat-sys-tertiary
$dbx-tertiary-color-var: --dbx-tertiary-color;
/// dbx accent color. Alias for tertiary so legacy `accent` keeps working.
/// @intent accent color, highlight color
/// @role color
/// @see --mat-sys-tertiary
$dbx-accent-color-var: --dbx-accent-color;
/// dbx warn/error color. Aliased from `--mat-sys-error`.
/// @intent warn color, error color, destructive color
/// @role color
/// @see --mat-sys-error
$dbx-warn-color-var: --dbx-warn-color;
/// dbx notice color. Custom palette entry from the dbx theme config (no Material equivalent). Use for informational callouts.
/// @intent notice color, info color, informational callout, attention color
/// @role color
$dbx-notice-color-var: --dbx-notice-color;
/// dbx success color. Custom palette entry from the dbx theme config (no Material equivalent). Use for confirmation / positive states.
/// @intent success color, positive color, confirmation color, ok-state color
/// @role color
$dbx-success-color-var: --dbx-success-color;
/// dbx ok color. Custom palette entry from the dbx theme config (no Material equivalent). Use for neutral acknowledged states.
/// @intent ok color, neutral acknowledged color, completed color
/// @role color
$dbx-ok-color-var: --dbx-ok-color;
/// dbx grey color. Aliased from `--mat-sys-outline` for neutral chrome / muted accents.
/// @intent grey color, neutral color, muted accent color
/// @role color
/// @see --mat-sys-outline
$dbx-grey-color-var: --dbx-grey-color;
/// dbx disabled color. Aliased from `--mat-sys-outline-variant` — used for disabled control surfaces and dimmed accents.
/// @intent disabled color, dimmed color, inactive color
/// @role color
/// @see --mat-sys-outline-variant
$dbx-disabled-color-var: --dbx-disabled-color;
/// dbx default color. Aliased from `--mat-sys-on-surface` — the canonical "default" foreground when no semantic role applies.
/// @intent default color, neutral default, fallback color
/// @role color
/// @see --mat-sys-on-surface
$dbx-default-color-var: --dbx-default-color;

$dbx-primary-color-contrast-var: --dbx-primary-color-contrast;
$dbx-secondary-color-contrast-var: --dbx-secondary-color-contrast;
$dbx-tertiary-color-contrast-var: --dbx-tertiary-color-contrast;
$dbx-accent-color-contrast-var: --dbx-accent-color-contrast;
$dbx-warn-color-contrast-var: --dbx-warn-color-contrast;
$dbx-notice-color-contrast-var: --dbx-notice-color-contrast;
$dbx-success-color-contrast-var: --dbx-success-color-contrast;
$dbx-ok-color-contrast-var: --dbx-ok-color-contrast;
$dbx-grey-color-contrast-var: --dbx-grey-color-contrast;
$dbx-disabled-color-contrast-var: --dbx-disabled-color-contrast;
$dbx-default-color-contrast-var: --dbx-default-color-contrast;

// Surface & outline variables (aliased from --mat-sys-* system variables)
/// Default surface background. Aliased from `--mat-sys-surface`.
/// @intent base surface, page background, surface background, app background
/// @role surface
/// @anti-use Don't hardcode `background: #fff`; this token flips automatically in dark mode.
/// @primitive content-box
/// @see --mat-sys-surface
$dbx-surface-color-var: --dbx-surface-color;
/// Container surface — the canonical card / content-box background. Aliased from `--mat-sys-surface-container`.
/// @intent card background, container surface, raised surface
/// @role surface
/// @anti-use Don't hardcode `background: #f8f9fa`; use this var so dark mode flips automatically.
/// @primitive content-box
/// @see --mat-sys-surface-container
$dbx-surface-container-color-var: --dbx-surface-container-color;
/// Default body text on surfaces. Aliased from `--mat-sys-on-surface`.
/// @intent body text color, default foreground, primary text
/// @role text-color
/// @see --mat-sys-on-surface
$dbx-on-surface-color-var: --dbx-on-surface-color;
/// Hint / secondary text color. Aliased from `--mat-sys-on-surface-variant`.
/// @intent hint text color, secondary text, subtitle text, muted text, caption text
/// @role text-color
/// @anti-use Don't write `color: rgba(0,0,0,0.6)` for hint text — use this var.
/// @utility .dbx-text-hint
/// @see --mat-sys-on-surface-variant
$dbx-on-surface-variant-color-var: --dbx-on-surface-variant-color;
/// Border / divider color. Aliased from `--mat-sys-outline`.
/// @intent border color, divider color, outline color
/// @role color
/// @see --mat-sys-outline
$dbx-outline-color-var: --dbx-outline-color;
/// Subtle border color. Aliased from `--mat-sys-outline-variant`.
/// @intent subtle border color, low-contrast outline, decorative divider
/// @role color
/// @see --mat-sys-outline-variant
$dbx-outline-variant-color-var: --dbx-outline-variant-color;
/// Error/destructive color (alias for warn). Aliased from `--mat-sys-error`.
/// @intent error color, destructive color
/// @role color
/// @see --mat-sys-error
$dbx-error-color-var: --dbx-error-color;

// Shared border system — a base color + an opacity knob blended into a single
// semi-transparent border color. Components apply --dbx-border-color-current and
// can tune either input token locally without touching the others.
/// Base border color for the shared semi-transparent border system. Defaults to `--mat-sys-outline-variant` (the M3 divider color). Blended with `--dbx-border-opacity` to produce `--dbx-border-color-current`.
/// @intent border base color, divider base color, outline base color
/// @role color
/// @see --mat-sys-outline-variant
/// @see --dbx-border-opacity
/// @see --dbx-border-color-current
$dbx-border-color-var: --dbx-border-color;
/// Opacity applied to `--dbx-border-color` when computing the effective border color. A percentage (e.g. `70%`). Lower it for a fainter border, raise it toward `100%` for a solid divider.
/// @intent border opacity, divider transparency, border alpha, semi-transparent border opacity
/// @role misc
/// @see --dbx-border-color
/// @see --dbx-border-color-current
$dbx-border-opacity-var: --dbx-border-opacity;
/// Effective, semi-transparent border color — a `color-mix` of `--dbx-border-color` at `--dbx-border-opacity`. Apply this directly to `border` / `border-top` / `border-bottom`. Overriding either input token (globally or on a local scope) recomputes this automatically.
/// @intent border color, divider color, semi-transparent border color, computed border color
/// @role color
/// @anti-use Don't hardcode `border: 1px solid rgba(0,0,0,0.1)`; use this token so the color and opacity stay themeable.
/// @see --dbx-border-color
/// @see --dbx-border-opacity
$dbx-border-color-current-var: --dbx-border-color-current;

/// Shared divider color for component dividers/separators (dbx-table-view summary rule, dbx-two-column boundary, dbx-calendar cell borders, etc.). Defaults to `--dbx-border-color-current` so every divider inherits the themeable semi-transparent border by default; override this single token (globally or on a local scope) to retint all dividers at once, or override a component's own divider token to retint just that one.
/// @intent divider color, separator color, shared divider, component divider color
/// @role color
/// @anti-use Don't hardcode a per-component divider color; default it to this token so dividers stay consistent and themeable.
/// @see --dbx-border-color-current
$dbx-divider-color-var: --dbx-divider-color;

/// Per-app additional offset subtracted from the app-height base. Set to a non-zero value to shrink `--dbx-app-height` by a fixed amount (e.g. for a sticky footer). Defaults to `0px`.
/// @intent app height offset, app height adjustment, shrink app height
/// @role size
/// @see --dbx-app-height
/// @see --dbx-app-height-base
$dbx-app-height-additional-offset-var: --dbx-app-height-additional-offset;
/// Base app height before the additional offset. Computed as `100vh - (top-banner + bottom-banner)`. Set by the `app-height()` mixin.
/// @intent app height base, viewport minus banners
/// @role size
/// @see --dbx-app-height
$dbx-app-height-base-var: --dbx-app-height-base;
/// Final app height available to the page. Equal to `app-height-base - app-height-additional-offset`. The `.dbx-app-height` / `.dbx-app-height-max` utilities consume this directly.
/// @intent app height, viewport-bound app height, full app area height
/// @role size
/// @utility .dbx-app-height, .dbx-app-height-max
/// @see --dbx-app-height-base
/// @see --dbx-app-height-additional-offset
$dbx-app-height-var: --dbx-app-height;

/// Per-page additional offset subtracted from the page-height base. Use to shrink `--dbx-page-height` on pages that overlay extra chrome. Defaults to `0px`.
/// @intent page height offset, page height adjustment, shrink page height
/// @role size
/// @see --dbx-page-height
/// @see --dbx-page-height-base
$dbx-page-height-additional-offset-var: --dbx-page-height-additional-offset;
/// Base page height before the additional offset. Computed as `app-height - page-navbar-height`.
/// @intent page height base, app height minus page navbar
/// @role size
/// @see --dbx-page-height
$dbx-page-height-base-var: --dbx-page-height-base;
/// Final page height inside a page navbar. Equal to `page-height-base - page-height-additional-offset`. The `.dbx-page-height` / `.dbx-page-height-max` utilities consume this directly.
/// @intent page height, page area height, page-without-navbar height
/// @role size
/// @utility .dbx-page-height, .dbx-page-height-max
/// @see --dbx-page-height-base
/// @see --dbx-page-height-additional-offset
$dbx-page-height-var: --dbx-page-height;

/// Per-content additional offset subtracted from the content-height base. Use to reserve space for sticky toolbars inside a content area. Defaults to `0px`.
/// @intent content height offset, content height adjustment, shrink content height
/// @role size
/// @see --dbx-content-height
/// @see --dbx-content-height-base
$dbx-content-height-additional-offset-var: --dbx-content-height-additional-offset;
/// Number of content navbars stacked above the content area, used to compute `--dbx-content-height-base`. Defaults to `0`.
/// @intent content headers count, stacked content navbar count
/// @role misc
/// @see --dbx-content-height-base
$dbx-content-headers-count-var: --dbx-content-headers-count;
/// Base content height before the additional offset. Computed as `page-height - (content-navbar-height * content-headers-count)`.
/// @intent content height base, page height minus content navbars
/// @role size
/// @see --dbx-content-height
$dbx-content-height-base-var: --dbx-content-height-base;
/// Final content height inside one or more content navbars. Equal to `content-height-base - content-height-additional-offset`. The `.dbx-content-height` / `.dbx-content-height-max` utilities consume this directly.
/// @intent content height, content area height, content-without-navbar height
/// @role size
/// @utility .dbx-content-height, .dbx-content-height-max
/// @see --dbx-content-height-base
/// @see --dbx-content-height-additional-offset
$dbx-content-height-var: --dbx-content-height;
/// Nested content height — content height minus one content-navbar tier, for nested content scrolls. Equal to `content-height - content-navbar-height`.
/// @intent nested content height, content minus one navbar
/// @role size
/// @utility .dbx-nested-content-height, .dbx-nested-content-height-max
/// @see --dbx-content-height
/// @see --dbx-content-navbar-height
$dbx-nested-content-height-var: --dbx-nested-content-height;

/// Default avatar diameter for `<dbx-avatar>`.
/// @intent avatar size, default avatar diameter
/// @role size
$dbx-avatar-size-var: --dbx-avatar-size;
/// Large avatar diameter for `<dbx-avatar>`.
/// @intent avatar large size, big avatar
/// @role size
$dbx-avatar-large-size-var: --dbx-avatar-large-size;
/// Small avatar diameter for `<dbx-avatar>`.
/// @intent avatar small size, compact avatar
/// @role size
$dbx-avatar-small-size-var: --dbx-avatar-small-size;

// vars
$vh100: var($vh100-var);

$top-banner-height: var($top-banner-height-var);
$bottom-banner-height: var($bottom-banner-height-var);

$app-height-base: calc($vh100 - ($top-banner-height - $bottom-banner-height));
// $app-height-base: var($dbx-app-height-base-var);

$app-height: calc($app-height-base - var($dbx-app-height-additional-offset-var, 0px));
// $app-height: var($dbx-app-height-var);

$page-navbar-height: var($page-navbar-height-var);
$content-navbar-height: var($content-navbar-height-var);

$page-height-base: calc($app-height - $page-navbar-height);
// $page-height-base: var($dbx-page-height-base-var);

$page-height: calc($page-height-base - var($dbx-page-height-additional-offset-var, 0px));
// $page-height: var($dbx-page-height-var);

$content-headers-count: var($dbx-content-headers-count-var, 0);
$content-height-base: calc($page-height - ($content-navbar-height * ($content-headers-count)));
// $content-height-base: var($dbx-content-height-base-var);

$content-height: calc($content-height-base - var($dbx-content-height-additional-offset-var, 0px));
$nested-content-height: calc(var($dbx-content-height-var) - $content-navbar-height);

$box-max-width: var($box-max-width-var);
$content-max-width: var($content-max-width-var);

$padding-0: var($padding-0-var);
$padding-1: var($padding-1-var);
$padding-2: var($padding-2-var);
$padding-3: var($padding-3-var);
$padding-4: var($padding-4-var);
$padding-5: var($padding-5-var);

$padding-map: (
  0: $padding-0,
  1: $padding-1,
  2: $padding-2,
  3: $padding-3,
  4: $padding-4,
  5: $padding-5
);

$two-column-left-width: var($two-column-left-width-var);

$dbx-color: var($dbx-color-var);
$dbx-bg-color: var($dbx-bg-color-var);

$dbx-primary-color: var($dbx-primary-color-var);
$dbx-secondary-color: var($dbx-secondary-color-var);
$dbx-tertiary-color: var($dbx-tertiary-color-var);
$dbx-accent-color: var($dbx-accent-color-var);
$dbx-warn-color: var($dbx-warn-color-var);
$dbx-notice-color: var($dbx-notice-color-var);
$dbx-success-color: var($dbx-success-color-var);
$dbx-ok-color: var($dbx-ok-color-var);
$dbx-grey-color: var($dbx-grey-color-var);
$dbx-disabled-color: var($dbx-disabled-color-var);
$dbx-default-color: var($dbx-default-color-var);

$dbx-primary-color-contrast: var($dbx-primary-color-contrast-var);
$dbx-secondary-color-contrast: var($dbx-secondary-color-contrast-var);
$dbx-tertiary-color-contrast: var($dbx-tertiary-color-contrast-var);
$dbx-accent-color-contrast: var($dbx-accent-color-contrast-var);
$dbx-warn-color-contrast: var($dbx-warn-color-contrast-var);
$dbx-notice-color-contrast: var($dbx-notice-color-contrast-var);
$dbx-success-color-contrast: var($dbx-success-color-contrast-var);
$dbx-ok-color-contrast: var($dbx-ok-color-contrast-var);
$dbx-grey-color-contrast: var($dbx-grey-color-contrast-var);
$dbx-disabled-color-contrast: var($dbx-disabled-color-contrast-var);
$dbx-default-color-contrast: var($dbx-default-color-contrast-var);

$dbx-surface-color: var($dbx-surface-color-var);
$dbx-surface-container-color: var($dbx-surface-container-color-var);
$dbx-on-surface-color: var($dbx-on-surface-color-var);
$dbx-on-surface-variant-color: var($dbx-on-surface-variant-color-var);
$dbx-outline-color: var($dbx-outline-color-var);
$dbx-outline-variant-color: var($dbx-outline-variant-color-var);
$dbx-error-color: var($dbx-error-color-var);

$dbx-border-color: var($dbx-border-color-var);
$dbx-border-opacity: var($dbx-border-opacity-var);
$dbx-border-color-current: var($dbx-border-color-current-var);
$dbx-divider-color: var($dbx-divider-color-var);

/// Border radius for the `[dbxContentPit]`, applied by default to every pit. Defaults to `var(--mat-sys-corner-medium)`.
/// @intent pit radius, rounded pit corner, content pit radius
/// @role radius
/// @see --mat-sys-corner-medium
$dbx-content-pit-rounded-border-radius-var: --dbx-content-pit-rounded-border-radius;
$dbx-content-pit-rounded-border-radius: var($dbx-content-pit-rounded-border-radius-var);

/// Border radius for the generic `.dbx-corners` utility class. Defaults to `var(--mat-sys-corner-medium)`.
/// @intent corners radius, generic corner radius, dbx-corners radius
/// @role radius
/// @see --mat-sys-corner-medium
$dbx-corners-border-radius-var: --dbx-corners-border-radius;
$dbx-corners-border-radius: var($dbx-corners-border-radius-var);

$dbx-content-pit-scrollable-max-height-var: --dbx-content-pit-scrollable-max-height;
$dbx-content-pit-scrollable-max-height: var($dbx-content-pit-scrollable-max-height-var);

$dbx-avatar-size: var($dbx-avatar-size-var);
$dbx-avatar-large-size: var($dbx-avatar-large-size-var);
$dbx-avatar-small-size: var($dbx-avatar-small-size-var);

$dbx-theme-colors-main: (
  'primary': (
    'color': $dbx-primary-color,
    'contrast': $dbx-primary-color-contrast
  ),
  'secondary': (
    'color': $dbx-secondary-color,
    'contrast': $dbx-secondary-color-contrast
  ),
  'tertiary': (
    'color': $dbx-tertiary-color,
    'contrast': $dbx-tertiary-color-contrast
  ),
  'accent': (
    'color': $dbx-accent-color,
    'contrast': $dbx-accent-color-contrast
  ),
  'warn': (
    'color': $dbx-warn-color,
    'contrast': $dbx-warn-color-contrast
  )
);

$dbx-theme-extra-colors-main: (
  'notice': (
    'color': $dbx-notice-color,
    'contrast': $dbx-notice-color-contrast
  ),
  'success': (
    'color': $dbx-success-color,
    'contrast': $dbx-success-color-contrast
  ),
  'ok': (
    'color': $dbx-ok-color,
    'contrast': $dbx-ok-color-contrast
  ),
  'grey': (
    'color': $dbx-grey-color,
    'contrast': $dbx-grey-color-contrast
  )
);

$dbx-theme-colors-main-and-extra: map.merge($dbx-theme-colors-main, $dbx-theme-extra-colors-main);

$dbx-theme-extra-colors-secondary: (
  'disabled': (
    'color': $dbx-disabled-color-contrast,
    'contrast': $dbx-disabled-color
  ),
  'default': (
    'color': $dbx-default-color-contrast,
    'contrast': $dbx-default-color
  )
);

$dbx-theme-extra-colors-main-and-secondary: map.merge($dbx-theme-extra-colors-main, $dbx-theme-extra-colors-secondary);