@layer reset, tokens, base, components, pages;

@layer tokens {
  :root {
    color-scheme: light dark;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    --bg: #F2F2F5;
    --bg-elevated: #FFFFFF;
    --bg-elevated-2: #FFFFFF;
    --fill: #E9E9EE;
    --tint: #000000;
    --knob: #FFFFFF;
    --qr-paper: #FFFFFF;
    --signature-ink: #1C1C1E;
    --series-1: #2A78D6;
    --series-2: #EB6834;
    --series-3: #1BAF7A;
    --series-4: #EDA100;
    --series-5: #E87BA4;
    --series-6: #008300;
    --fill-hover: color-mix(in srgb, var(--fill) 92%, var(--tint));
    --cal-booking: #0A6BD8;
    --cal-on-booking: #FFFFFF;
    --cal-completed: #FFD500;
    --cal-on-completed: #1C1C1E;
    --cal-unpaid: #FF9500;
    --cal-on-unpaid: #1C1C1E;
    --cal-overdue: #D70015;
    --cal-overdue-pulse: #A50011;
    --cal-on-overdue: #FFFFFF;
    --cal-rental: #178244;
    --cal-on-rental: #FFFFFF;
    --cal-cancelled: #C7C7CC;
    --cal-on-cancelled: #1C1C1E;
    --co-1: #0A6BD8;
    --co-2: #5E4AD8;
    --co-3: #8E3BC2;
    --co-4: #C2185B;
    --co-5: #C4430B;
    --co-6: #8A5A00;
    --co-7: #178244;
    --co-8: #0F7B83;
    --on-co: #FFFFFF;
    --selection: rgb(120 120 128 / 0.18);
    --label: #1C1C1E;
    --label-secondary: #5F5F66;
    --label-tertiary: #69696D;
    --separator: #D1D1D6;
    --field-border: #8E8E93;
    --accent-fill: #FFD500;
    --on-accent: #1C1C1E;
    --accent-text: #1C1C1E;
    --success: #1D7A47;
    --danger: #C42B2B;
    --on-danger: #FFFFFF;
    --warning: #995700;
    --info: #0B62C4;
    --scrim: rgb(0 0 0 / .32);
    --focus-ring: var(--accent-text);
    --focus-width: 2px;
    --selection-ring: transparent;
    --material-opacity: 78%;

    --shadow-1: 0 1px 2px rgb(0 0 0 / .06);
    --shadow-2: 0 4px 16px rgb(0 0 0 / .08), 0 1px 3px rgb(0 0 0 / .06);
    --shadow-3: 0 16px 48px rgb(0 0 0 / .16);

    --font-text: "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-thai: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif;
    --font-numeric: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --font-calendar: "Segoe UI", system-ui, "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif;
    --font-calendar-thai: "IBM Plex Sans Thai", "Segoe UI", system-ui, "IBM Plex Sans", sans-serif;

    --t-large-title: 600 2rem/1.15 var(--font-text);
    --t-large-title-track: -0.02em;
    --t-title-1: 600 1.625rem/1.2 var(--font-text);
    --t-title-1-track: -0.015em;
    --t-title-2: 600 1.3125rem/1.25 var(--font-text);
    --t-title-2-track: -0.01em;
    --t-title-3: 500 1.125rem/1.3 var(--font-text);
    --t-title-3-track: -0.005em;
    --t-headline: 600 0.9375rem/1.35 var(--font-text);
    --t-body: 400 0.9375rem/1.45 var(--font-text);
    --t-callout: 400 0.875rem/1.4 var(--font-text);
    --t-subhead: 400 0.8125rem/1.35 var(--font-text);
    --t-footnote: 400 0.75rem/1.3 var(--font-text);
    --t-footnote-track: 0.005em;
    --t-caption: 500 0.6875rem/1.3 var(--font-text);
    --t-caption-track: 0.01em;

    --n-display: 2.5rem;
    --n-large: 1.625rem;
    --n-body: 0.9375rem;
    --n-unit: max(0.6em, 0.6875rem);

    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;

    --page-gutter: var(--s-8);
    --w-content: 1280px;
    --w-form: 720px;
    --w-text: 70ch;
    --row-h: 44px;
    --row-h-sub: 60px;
    --control-h: 36px;
    --target-min: 28px;
    --touch-min: 0px;

    --r-1: 6px;
    --r-2: 10px;
    --r-3: 14px;
    --r-full: 999px;

    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-1: 150ms;
    --dur-2: 250ms;
    --dur-3: 350ms;

    --z-content: 1;
    --z-sticky: 100;
    --z-sidebar: 200;
    --z-menu: 300;
    --z-sheet: 400;
    --z-popover: 450;
    --z-toast: 500;
  }

  @media (max-width: 767px) {
    :root {
      --t-large-title: 600 1.875rem/1.15 var(--font-text);
      --t-title-3: 500 1.1875rem/1.3 var(--font-text);
      --t-headline: 600 1.0625rem/1.35 var(--font-text);
      --t-body: 400 1.0625rem/1.45 var(--font-text);
      --t-callout: 400 1rem/1.4 var(--font-text);
      --t-subhead: 400 0.9375rem/1.35 var(--font-text);
      --t-footnote: 400 0.8125rem/1.3 var(--font-text);
      --t-caption: 500 0.75rem/1.3 var(--font-text);
      --n-display: 2.125rem;
      --n-body: 1.0625rem;
      --page-gutter: var(--s-4);
      --row-h: 52px;
      --control-h: 44px;
      --target-min: 44px;
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    :root { --page-gutter: var(--s-6); }
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --series-1: #3987E5;
      --series-2: #D95926;
      --series-3: #199E70;
      --series-4: #C98500;
      --series-5: #D55181;
      --series-6: #008300;
      --bg: #000000;
      --cal-booking: #409CFF;
      --cal-on-booking: #1C1C1E;
      --cal-completed: #FFD60A;
      --cal-on-completed: #1C1C1E;
      --cal-unpaid: #FF9F0A;
      --cal-on-unpaid: #1C1C1E;
      --cal-overdue: #FF6961;
      --cal-overdue-pulse: #FF8A84;
      --cal-on-overdue: #1C1C1E;
      --cal-rental: #30D158;
      --cal-on-rental: #1C1C1E;
      --cal-cancelled: #48484A;
      --cal-on-cancelled: #F5F5F7;
      --co-1: #409CFF;
      --co-2: #A08CFF;
      --co-3: #DA8FFF;
      --co-4: #FF7AA8;
      --co-5: #FF9F5A;
      --co-6: #FFD60A;
      --co-7: #30D158;
      --co-8: #40C8E0;
      --on-co: #1C1C1E;
      --bg-elevated: #1C1C1E;
      --bg-elevated-2: #2C2C2E;
      --fill: #3A3A3C;
      --tint: #FFFFFF;
      --fill-hover: color-mix(in srgb, var(--fill) 88%, var(--tint));
      --selection: rgb(120 120 128 / 0.32);
      --label: #F5F5F7;
      --label-secondary: #A5A5AC;
      --label-tertiary: #A3A3A9;
      --separator: #38383A;
      --field-border: #85858B;
      --accent-fill: #FFD500;
      --on-accent: #1C1C1E;
      --accent-text: #FFD500;
      --success: #4CC283;
      --danger: #FF6B5E;
      --on-danger: #1C1C1E;
      --warning: #F0A63C;
      --info: #5AA9FF;
      --scrim: rgb(0 0 0 / .48);
      --focus-ring: var(--accent-text);
      --shadow-1: none;
      --shadow-2: none;
      --shadow-3: none;
    }
  }

  :root[data-theme="dark"],
  .ui-scheme-dark {
    --series-1: #3987E5;
    --series-2: #D95926;
    --series-3: #199E70;
    --series-4: #C98500;
    --series-5: #D55181;
    --series-6: #008300;
    --bg: #000000;
    --cal-booking: #409CFF;
    --cal-on-booking: #1C1C1E;
    --cal-completed: #FFD60A;
    --cal-on-completed: #1C1C1E;
    --cal-unpaid: #FF9F0A;
    --cal-on-unpaid: #1C1C1E;
    --cal-overdue: #FF6961;
    --cal-overdue-pulse: #FF8A84;
    --cal-on-overdue: #1C1C1E;
    --cal-rental: #30D158;
    --cal-on-rental: #1C1C1E;
    --cal-cancelled: #48484A;
    --cal-on-cancelled: #F5F5F7;
    --co-1: #409CFF;
    --co-2: #A08CFF;
    --co-3: #DA8FFF;
    --co-4: #FF7AA8;
    --co-5: #FF9F5A;
    --co-6: #FFD60A;
    --co-7: #30D158;
    --co-8: #40C8E0;
    --on-co: #1C1C1E;
    --bg-elevated: #1C1C1E;
    --bg-elevated-2: #2C2C2E;
    --fill: #3A3A3C;
    --tint: #FFFFFF;
    --fill-hover: color-mix(in srgb, var(--fill) 88%, var(--tint));
    --selection: rgb(120 120 128 / 0.32);
    --label: #F5F5F7;
    --label-secondary: #A5A5AC;
    --label-tertiary: #A3A3A9;
    --separator: #38383A;
    --field-border: #85858B;
    --accent-fill: #FFD500;
    --on-accent: #1C1C1E;
    --accent-text: #FFD500;
    --success: #4CC283;
    --danger: #FF6B5E;
    --on-danger: #1C1C1E;
    --warning: #F0A63C;
    --info: #5AA9FF;
    --scrim: rgb(0 0 0 / .48);
    --focus-ring: var(--accent-text);
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;
  }

  .ui-scheme-light {
    --bg: #F2F2F5;
    --bg-elevated: #FFFFFF;
    --bg-elevated-2: #FFFFFF;
    --fill: #E9E9EE;
    --tint: #000000;
    --knob: #FFFFFF;
    --qr-paper: #FFFFFF;
    --signature-ink: #1C1C1E;
    --series-1: #2A78D6;
    --series-2: #EB6834;
    --series-3: #1BAF7A;
    --series-4: #EDA100;
    --series-5: #E87BA4;
    --series-6: #008300;
    --fill-hover: color-mix(in srgb, var(--fill) 92%, var(--tint));
    --cal-booking: #0A6BD8;
    --cal-on-booking: #FFFFFF;
    --cal-completed: #FFD500;
    --cal-on-completed: #1C1C1E;
    --cal-unpaid: #FF9500;
    --cal-on-unpaid: #1C1C1E;
    --cal-overdue: #D70015;
    --cal-overdue-pulse: #A50011;
    --cal-on-overdue: #FFFFFF;
    --cal-rental: #178244;
    --cal-on-rental: #FFFFFF;
    --cal-cancelled: #C7C7CC;
    --cal-on-cancelled: #1C1C1E;
    --co-1: #0A6BD8;
    --co-2: #5E4AD8;
    --co-3: #8E3BC2;
    --co-4: #C2185B;
    --co-5: #C4430B;
    --co-6: #8A5A00;
    --co-7: #178244;
    --co-8: #0F7B83;
    --on-co: #FFFFFF;
    --selection: rgb(120 120 128 / 0.18);
    --label: #1C1C1E;
    --label-secondary: #5F5F66;
    --label-tertiary: #69696D;
    --separator: #D1D1D6;
    --field-border: #8E8E93;
    --accent-fill: #FFD500;
    --on-accent: #1C1C1E;
    --accent-text: #1C1C1E;
    --success: #1D7A47;
    --danger: #C42B2B;
    --on-danger: #FFFFFF;
    --warning: #995700;
    --info: #0B62C4;
    --scrim: rgb(0 0 0 / .32);
    --focus-ring: var(--accent-text);
    --shadow-1: 0 1px 2px rgb(0 0 0 / .06);
    --shadow-2: 0 4px 16px rgb(0 0 0 / .08), 0 1px 3px rgb(0 0 0 / .06);
    --shadow-3: 0 16px 48px rgb(0 0 0 / .16);
  }

  :root[data-theme="light"],
  .ui-scheme-light { color-scheme: light; }
  :root[data-theme="dark"],
  .ui-scheme-dark { color-scheme: dark; }

  @media (prefers-contrast: more) {
    :root:not([data-contrast="normal"]) {
      --label-secondary: var(--label);
      --separator: var(--field-border);
      --material-opacity: 100%;
      --focus-width: 3px;
      --selection-ring: var(--field-border);
    }
  }

  :root[data-contrast="more"] {
    --label-secondary: var(--label);
    --separator: var(--field-border);
    --material-opacity: 100%;
    --focus-width: 3px;
    --selection-ring: var(--field-border);
  }

  @media (prefers-reduced-transparency: reduce) {
    :root:not([data-transparency="normal"]) { --material-opacity: 100%; }
  }

  :root[data-transparency="reduce"] { --material-opacity: 100%; }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="normal"]) { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
  }

  :root[data-motion="reduce"] { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }

  :root[data-text-size="small"] { font-size: 93.75%; }
  :root[data-text-size="large"] { font-size: 112.5%; }

  @media (min-width: 768px) {
    :root[data-density="compact"] {
      --row-h: 36px;
      --control-h: 32px;
    }
  }

  @media (pointer: coarse) {
    :root,
    :root[data-density="compact"] {
      --control-h: 44px;
      --target-min: 44px;
      --touch-min: 44px;
    }

    :root[data-density="compact"] { --row-h: 44px; }
  }

  :lang(th) {
    --font-text: var(--font-thai);
    --font-calendar: var(--font-calendar-thai);
  }
}