/*
 * FFStock Corporate Interface (CI) tokens v2.
 * This file is deliberately self-contained: it must not read --ff-*, --app-*,
 * role themes, or values emitted by ui_branding_settings.php.
 */
@font-face {
  font-family: "FF Noto Sans Thai";
  src: url("../fonts/NotoSansThai-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Owner direction: pale layered surfaces, teal hierarchy, semantic accents. */
  --ci-color-bg-top: #dfeae8;
  --ci-color-bg-mid: #eef4f3;
  --ci-color-bg-bottom: #f7f9f8;
  --ci-color-surface: rgba(255, 255, 255, .9);
  --ci-color-surface-strong: #ffffff;
  --ci-color-surface-soft: rgba(240, 247, 245, .94);
  --ci-color-ink: #18222e;
  --ci-color-ink-soft: #3d4854;
  --ci-color-muted: #6d7882;
  --ci-color-line: rgba(7, 94, 89, .11);
  --ci-color-line-strong: rgba(7, 94, 89, .2);
  --ci-color-brand-800: #075e59;
  --ci-color-brand-700: #0b837a;
  --ci-color-brand-600: #20a79a;
  --ci-color-brand-100: #e3f5f1;
  --ci-color-depth-edge: #0b837a;
  --ci-color-depth-accent: #2fd3b3;
  --ci-color-success: #087c70;
  --ci-color-success-soft: #e4f7f1;
  --ci-color-warning: #916400;
  --ci-color-warning-soft: #fff5d8;
  --ci-color-danger: #d94f5c;
  --ci-color-danger-soft: #fff0f1;
  --ci-color-notification: #ff2d35;
  --ci-color-info: #237fba;
  --ci-color-info-soft: #eaf6fd;

  /* Type families */
  --ci-font-sans: "FF Noto Sans Thai", "Noto Sans Thai", Tahoma, Arial, sans-serif;
  --ci-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Product type scale: size / matching line-height */
  --ci-type-11: .6875rem;
  --ci-type-12: .75rem;
  --ci-type-14: .875rem;
  --ci-type-16: 1rem;
  --ci-type-20: 1.25rem;
  --ci-type-24: 1.5rem;
  --ci-type-32: 2rem;
  --ci-type-48: 3rem;
  --ci-leading-16: 1rem;
  --ci-leading-20: 1.25rem;
  --ci-leading-24: 1.5rem;
  --ci-leading-28: 1.75rem;
  --ci-leading-36: 2.25rem;
  --ci-leading-52: 3.25rem;
  --ci-tracking-tight: -.02em;
  --ci-tracking-heading: -.01em;
  --ci-tracking-body: 0;
  --ci-tracking-label: .02em;
  --ci-tracking-eyebrow: .08em;
  --ci-measure-reading: 66ch;

  /* 4px detail grid with an 8px layout rhythm */
  --ci-space-0: 0;
  --ci-space-1: 2px;
  --ci-space-2: 4px;
  --ci-space-3: 6px;
  --ci-space-4: 8px;
  --ci-space-5: 12px;
  --ci-space-6: 16px;
  --ci-space-7: 20px;
  --ci-space-8: 24px;
  --ci-space-9: 32px;
  --ci-space-10: 40px;
  --ci-space-11: 48px;
  --ci-space-12: 64px;
  --ci-space-13: 80px;

  /* Corner radius is measured in px or %, never degrees. */
  --ci-radius-detail: 4px;
  --ci-radius-compact: 8px;
  --ci-radius-control: 12px;
  --ci-radius-menu: 16px;
  --ci-radius-card: 22px;
  --ci-radius-dialog: 28px;
  --ci-radius-round: 999px;

  /* Decorative angles only. Never use these as a substitute for border-radius. */
  --ci-angle-accent-soft: 8deg;
  --ci-angle-sheen: 22deg;
  --ci-angle-glass: 24deg;

  /* Component measurements */
  --ci-control-height-sm: 36px;
  --ci-control-height-md: 44px;
  --ci-control-height-lg: 48px;
  --ci-table-row-dense: 32px;
  --ci-table-row-default: 40px;
  --ci-table-row-comfortable: 48px;
  --ci-table-pad-dense-y: 6px;
  --ci-table-pad-dense-x: 12px;
  --ci-table-pad-default-y: 10px;
  --ci-table-pad-default-x: 14px;
  --ci-table-pad-comfortable-y: 14px;
  --ci-table-pad-comfortable-x: 16px;
  --ci-page-inline: clamp(14px, 3vw, 40px);
  --ci-section-padding: clamp(16px, 2.4vw, 28px);

  /* Elevation, focus and motion */
  --ci-shadow-1: 0 1px 2px rgba(7, 56, 53, .04), 0 10px 28px rgba(7, 56, 53, .07);
  --ci-shadow-2: 0 18px 48px rgba(7, 56, 53, .1);
  --ci-shadow-3: 0 30px 90px rgba(7, 56, 53, .2);
  --ci-focus-ring: 0 0 0 3px rgba(32, 167, 154, .28);
  --ci-motion-fast: 120ms;
  --ci-motion-base: 180ms;
  --ci-motion-slow: 280ms;
  --ci-ease-standard: cubic-bezier(.2, .65, .2, 1);
}