/* Porto nijanse izvedene iz --app-* palete. */
:root {
  --primary: var(--app-primary);
  --primary-100: color-mix(in srgb, var(--app-primary), var(--app-dark) 10%);
  --primary-200: color-mix(in srgb, var(--app-primary), var(--app-dark) 20%);
  --primary-300: color-mix(in srgb, var(--app-primary), var(--app-dark) 30%);
  --primary--100: color-mix(in srgb, var(--app-primary), var(--app-light) 10%);
  --primary--200: color-mix(in srgb, var(--app-primary), var(--app-light) 20%);
  --primary--300: color-mix(in srgb, var(--app-primary), var(--app-light) 30%);
  --primary-rgba-0: color-mix(in srgb, var(--app-primary) 0%, transparent);
  --primary-rgba-10: color-mix(in srgb, var(--app-primary) 10%, transparent);
  --primary-rgba-20: color-mix(in srgb, var(--app-primary) 20%, transparent);
  --primary-rgba-30: color-mix(in srgb, var(--app-primary) 30%, transparent);
  --primary-rgba-40: color-mix(in srgb, var(--app-primary) 40%, transparent);
  --primary-rgba-50: color-mix(in srgb, var(--app-primary) 50%, transparent);
  --primary-rgba-60: color-mix(in srgb, var(--app-primary) 60%, transparent);
  --primary-rgba-70: color-mix(in srgb, var(--app-primary) 70%, transparent);
  --primary-rgba-80: color-mix(in srgb, var(--app-primary) 80%, transparent);
  --primary-rgba-90: color-mix(in srgb, var(--app-primary) 90%, transparent);
  --secondary: var(--app-secondary);
  --secondary-100: color-mix(in srgb, var(--app-secondary), var(--app-dark) 10%);
  --secondary-200: color-mix(in srgb, var(--app-secondary), var(--app-dark) 20%);
  --secondary-300: color-mix(in srgb, var(--app-secondary), var(--app-dark) 30%);
  --secondary--100: color-mix(in srgb, var(--app-secondary), var(--app-light) 10%);
  --secondary--200: color-mix(in srgb, var(--app-secondary), var(--app-light) 20%);
  --secondary--300: color-mix(in srgb, var(--app-secondary), var(--app-light) 30%);
  --secondary-rgba-0: color-mix(in srgb, var(--app-secondary) 0%, transparent);
  --secondary-rgba-10: color-mix(in srgb, var(--app-secondary) 10%, transparent);
  --secondary-rgba-20: color-mix(in srgb, var(--app-secondary) 20%, transparent);
  --secondary-rgba-30: color-mix(in srgb, var(--app-secondary) 30%, transparent);
  --secondary-rgba-40: color-mix(in srgb, var(--app-secondary) 40%, transparent);
  --secondary-rgba-50: color-mix(in srgb, var(--app-secondary) 50%, transparent);
  --secondary-rgba-60: color-mix(in srgb, var(--app-secondary) 60%, transparent);
  --secondary-rgba-70: color-mix(in srgb, var(--app-secondary) 70%, transparent);
  --secondary-rgba-80: color-mix(in srgb, var(--app-secondary) 80%, transparent);
  --secondary-rgba-90: color-mix(in srgb, var(--app-secondary) 90%, transparent);
  --tertiary: var(--app-surface);
  --tertiary-100: color-mix(in srgb, var(--app-surface), var(--app-dark) 10%);
  --tertiary-200: color-mix(in srgb, var(--app-surface), var(--app-dark) 20%);
  --tertiary-300: color-mix(in srgb, var(--app-surface), var(--app-dark) 30%);
  --tertiary--100: color-mix(in srgb, var(--app-surface), var(--app-light) 10%);
  --tertiary--200: color-mix(in srgb, var(--app-surface), var(--app-light) 20%);
  --tertiary--300: color-mix(in srgb, var(--app-surface), var(--app-light) 30%);
  --tertiary-rgba-0: color-mix(in srgb, var(--app-surface) 0%, transparent);
  --tertiary-rgba-10: color-mix(in srgb, var(--app-surface) 10%, transparent);
  --tertiary-rgba-20: color-mix(in srgb, var(--app-surface) 20%, transparent);
  --tertiary-rgba-30: color-mix(in srgb, var(--app-surface) 30%, transparent);
  --tertiary-rgba-40: color-mix(in srgb, var(--app-surface) 40%, transparent);
  --tertiary-rgba-50: color-mix(in srgb, var(--app-surface) 50%, transparent);
  --tertiary-rgba-60: color-mix(in srgb, var(--app-surface) 60%, transparent);
  --tertiary-rgba-70: color-mix(in srgb, var(--app-surface) 70%, transparent);
  --tertiary-rgba-80: color-mix(in srgb, var(--app-surface) 80%, transparent);
  --tertiary-rgba-90: color-mix(in srgb, var(--app-surface) 90%, transparent);
  --quaternary: var(--app-dark);
  --quaternary-100: color-mix(in srgb, var(--app-dark), var(--app-dark) 10%);
  --quaternary-200: color-mix(in srgb, var(--app-dark), var(--app-dark) 20%);
  --quaternary-300: color-mix(in srgb, var(--app-dark), var(--app-dark) 30%);
  --quaternary--100: color-mix(in srgb, var(--app-dark), var(--app-light) 10%);
  --quaternary--200: color-mix(in srgb, var(--app-dark), var(--app-light) 20%);
  --quaternary--300: color-mix(in srgb, var(--app-dark), var(--app-light) 30%);
  --quaternary-rgba-0: color-mix(in srgb, var(--app-dark) 0%, transparent);
  --quaternary-rgba-10: color-mix(in srgb, var(--app-dark) 10%, transparent);
  --quaternary-rgba-20: color-mix(in srgb, var(--app-dark) 20%, transparent);
  --quaternary-rgba-30: color-mix(in srgb, var(--app-dark) 30%, transparent);
  --quaternary-rgba-40: color-mix(in srgb, var(--app-dark) 40%, transparent);
  --quaternary-rgba-50: color-mix(in srgb, var(--app-dark) 50%, transparent);
  --quaternary-rgba-60: color-mix(in srgb, var(--app-dark) 60%, transparent);
  --quaternary-rgba-70: color-mix(in srgb, var(--app-dark) 70%, transparent);
  --quaternary-rgba-80: color-mix(in srgb, var(--app-dark) 80%, transparent);
  --quaternary-rgba-90: color-mix(in srgb, var(--app-dark) 90%, transparent);
  --dark: var(--app-dark);
  --dark-100: color-mix(in srgb, var(--app-dark), var(--app-dark) 10%);
  --dark-200: color-mix(in srgb, var(--app-dark), var(--app-dark) 20%);
  --dark-300: color-mix(in srgb, var(--app-dark), var(--app-dark) 30%);
  --dark--100: color-mix(in srgb, var(--app-dark), var(--app-light) 10%);
  --dark--200: color-mix(in srgb, var(--app-dark), var(--app-light) 20%);
  --dark--300: color-mix(in srgb, var(--app-dark), var(--app-light) 30%);
  --dark-rgba-0: color-mix(in srgb, var(--app-dark) 0%, transparent);
  --dark-rgba-10: color-mix(in srgb, var(--app-dark) 10%, transparent);
  --dark-rgba-20: color-mix(in srgb, var(--app-dark) 20%, transparent);
  --dark-rgba-30: color-mix(in srgb, var(--app-dark) 30%, transparent);
  --dark-rgba-40: color-mix(in srgb, var(--app-dark) 40%, transparent);
  --dark-rgba-50: color-mix(in srgb, var(--app-dark) 50%, transparent);
  --dark-rgba-60: color-mix(in srgb, var(--app-dark) 60%, transparent);
  --dark-rgba-70: color-mix(in srgb, var(--app-dark) 70%, transparent);
  --dark-rgba-80: color-mix(in srgb, var(--app-dark) 80%, transparent);
  --dark-rgba-90: color-mix(in srgb, var(--app-dark) 90%, transparent);
  --light: var(--app-light);
  --light-100: color-mix(in srgb, var(--app-light), var(--app-dark) 10%);
  --light-200: color-mix(in srgb, var(--app-light), var(--app-dark) 20%);
  --light-300: color-mix(in srgb, var(--app-light), var(--app-dark) 30%);
  --light--100: color-mix(in srgb, var(--app-light), var(--app-light) 10%);
  --light--200: color-mix(in srgb, var(--app-light), var(--app-light) 20%);
  --light--300: color-mix(in srgb, var(--app-light), var(--app-light) 30%);
  --light-rgba-0: color-mix(in srgb, var(--app-light) 0%, transparent);
  --light-rgba-10: color-mix(in srgb, var(--app-light) 10%, transparent);
  --light-rgba-20: color-mix(in srgb, var(--app-light) 20%, transparent);
  --light-rgba-30: color-mix(in srgb, var(--app-light) 30%, transparent);
  --light-rgba-40: color-mix(in srgb, var(--app-light) 40%, transparent);
  --light-rgba-50: color-mix(in srgb, var(--app-light) 50%, transparent);
  --light-rgba-60: color-mix(in srgb, var(--app-light) 60%, transparent);
  --light-rgba-70: color-mix(in srgb, var(--app-light) 70%, transparent);
  --light-rgba-80: color-mix(in srgb, var(--app-light) 80%, transparent);
  --light-rgba-90: color-mix(in srgb, var(--app-light) 90%, transparent);
  --primary-inverse: var(--app-primary);
  --secondary-inverse: var(--app-secondary);
  --tertiary-inverse: var(--app-surface);
  --quaternary-inverse: var(--app-dark);
  --dark-inverse: var(--app-dark);
  --light-inverse: var(--app-light);
}