/* =========================================
  SEMANTIC TOKENS
========================================= */

:root {
  /* SURFACE */
  --surface-floating: var(--color-neutral-800);
  --surface-raised: var(--color-neutral-900);
  --surface-default: var(--color-neutral-950);
  --surface-sunken: #000;

  /* CONTAINER */
  /* NEUTRAL */
  --container-neutral: var(--color-neutral-200);
  --container-neutral-weak: var(--color-neutral-700);
  --container-neutral-weaker: var(--color-neutral-800);
  --container-neutral-strongest: var(--color-neutral-50);

  /* PRIMARY */
  --container-primary: var(--color-primary-500);
  --container-primary-weak: var(--color-primary-700);
  --container-primary-weaker: var(--color-primary-800);

  /* SUCCESS */
  --container-success: var(--color-success-800);
  --container-success-weak: var(--color-success-950);

  /* DANGER */
  --container-danger: var(--color-danger-800);
  --container-danger-weak: var(--color-danger-950);

  /* WARNING */
  --container-warning: var(--color-warning-800);
  --container-warning-weak: var(--color-warning-950);

  /* CONTENT */
  /* NEUTRAL */
  --content-strong: var(--color-neutral-50);
  --content-default: var(--color-neutral-100);
  --content-weak: var(--color-neutral-300);
  --content-weaker: var(--color-neutral-500);
  --content-weakest: var(--color-neutral-600);

  --content-primary: var(--color-primary-400);
  --content-success: var(--color-success-400);
  --content-warning: var(--color-warning-400);
  --content-danger: var(--color-danger-400);

  /* CONTENT ON */
  --content-on-primary: var(--color-primary-950);
  --content-on-neutral: var(--color-neutral-950);
  --content-on-success: var(--color-success-100);
  --content-on-warning: var(--color-warning-100);
  --content-on-danger: var(--color-danger-100);

  /* BORDER */
  /* NEUTRAL */
  --border-neutral: var(--color-neutral-200);
  --border-neutral-weak: var(--color-neutral-700);
  --border-neutral-weaker: var(--color-neutral-800);

  /* PRIMARY */
  --border-primary: var(--color-primary-500);
  --border-primary-weak: var(--color-primary-700);
  --border-primary-weaker: var(--color-primary-800);

  /* SUCCESS */
  --border-success: var(--color-success-500);
  --border-success-weak: var(--color-success-200);

  /* ERROR */
  --border-danger: var(--color-danger-500);
  --border-danger-weak: var(--color-danger-100);

  /* =========================================
    COMPONENT TOKENS
  ========================================= */

  /* Semi-transparent neutrals */
  --neutral-weaker: rgba(34, 47, 60, 0.95);
  --neutral-stronger-10: rgba(231, 247, 255, 0.1);

  /* Gradient base values */
  --black-gradient-semi: rgba(0, 0, 0, 0.5);
  --primary-gradient: linear-gradient(180deg, var(--container-primary) 0%, var(--color-primary-700) 100%);
  --primary-gradient-h: linear-gradient(90deg, var(--container-primary) 0%, var(--color-primary-700) 100%);

  /* General text shadow */
  --ts-detail: 1px 1px 2px var(--surface-sunken);

  /* Sidemenu */
  --item-border-bottom-background: var(--primary-gradient-h);

  /* Thumbnail filters & dimensions */
  --hc-thumb-grid-filter: brightness(0.35);
  --hc-thumb-filter: brightness(0.4);
  --hc-thumb-border-radius: 0.625rem;
  --hc-focus-border-radius: 1.25rem;
  --hc-thumb-height: 10rem;
  --hc-thumb-width: 17.5rem;

  /* Gradient directions */
  --top-linear-gradient: linear-gradient(to top, rgba(0, 0, 0, 0) 20%, var(--surface-default));
  --bottom-linear-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, var(--surface-default));
  --right-linear-gradient: linear-gradient(to right, rgba(0, 0, 0, 0) 20%, var(--surface-default));
  --left-linear-gradient: linear-gradient(to left, rgba(0, 0, 0, 0) 20%, var(--surface-default));

  /* Border radius */
  --br-05: 0.3125rem;
  --br-10: 0.625rem;
  --br-60: 3.75rem;

  /* Background images */
  --bg-customer: url('assets/customer/customer-background.png');

}