@layer base, layout, share, component, user;

:root {
  /* custom color */
  --bulma-dim-h: 221deg;
  --bulma-dim-s: 17%;
  --bulma-dim-l: 89%;
  --bulma-dim: hsl(var(--bulma-dim-h), var(--bulma-dim-s), var(--bulma-dim-l));
  --bulma-dim-invert: rgb(0, 36, 51);

  --app-width: 848px;
  --max-store-content: 1024px;

  --width-xs: 412px;
  --width-ss: 535px;
  --width-sm: 640px;
  --width-md: 768px;
  --width-lg: 1024px;
  --width-xl: 1280px;
  --width-2xl: 1536px;

  --base-font: "MiSans Thai", Inter, Roboto, sans-serif;

  --black            : #121212;
  --smoke            : #5e5f62;
  --snow             : #f8f8f8;
  --white-light      : #f3f3f3;
  --pink-light       : #ffe3e9;
  --danger           : #bb1212;
  --admin-gray       : #e2e1e1;
  --slate            : #6b7585;
  --slate-gray       : #ebedef;
  --blue-base        : #3b82f6;
  --blue-medium      : #2372f5;
  --blue-hard        : #0b63f3;
  --blue-heavy       : #0a59da;
  --blue-light       : #5392f7;
  --blue-soft        : #6ca1f8;
  --blue-dry         : #84b1f9;
  --blue-very-dry    : #d1e2fd;
  --blue-super-dry   : #ecf3ff;
  --blue-highlight   : #e3f5ff;

  --blue-secondary   : #3bb1f6;


  --app-backdrop     : var(--black);
  --app-main-bg      : #f5f5f9;
  --bg-admin         : var(--admin-gray);
  --bg-panel         : white;
  --bg-panel-light   : var(--white-light);
  --bg-discount      : var(--pink-light);
  --bg-panel-items   : var(--slate-gray);

  --btn-primary      : var(--blue-hard);
  --btn-secondary    : var(--blue-secondary);
  --btn-danger       : var(--danger);
  --btn-success      : dodgerblue;

  --text-normal      : var(--black);
  --text-highlight   : var(--blue-hard);

  --shadow-normal: 0 6px 12px -4px hsla(221deg, 14%, 4%,0.1),0 0px 0 1px hsla(221deg, 14%, 4%,0.02);
}