/**
 * Design tokens from context/theme.json
 * Three-layer: primitives → semantic → component
 * Do not scatter brand hex values in page CSS.
 */

:root {
  /* ── Primitive: Brand ── */
  --brand-primary: #064A87;
  --brand-primary-hover: #043E72;
  --brand-primary-active: #03345F;
  --brand-primary-soft: #EAF2F9;
  --brand-secondary: #08A4D5;
  --brand-secondary-hover: #078FBA;
  --brand-secondary-soft: #E7F8FD;
  --brand-navy: #0A315B;
  --brand-cyan: #15B8E6;

  /* ── Primitive: Neutrals ── */
  --neutral-white: #FFFFFF;
  --neutral-50: #F8FAFC;
  --neutral-100: #F2F6F9;
  --neutral-200: #E4EBF1;
  --neutral-300: #D3DEE7;
  --neutral-400: #9AABBA;
  --neutral-500: #6E7F8E;
  --neutral-600: #526270;
  --neutral-700: #354553;
  --neutral-800: #20303D;
  --neutral-900: #12212E;

  /* ── Primitive: Semantic colors ── */
  --semantic-success: #16865C;
  --semantic-success-soft: #E8F6F0;
  --semantic-warning: #C98212;
  --semantic-warning-soft: #FFF5DF;
  --semantic-danger: #C63F4A;
  --semantic-danger-soft: #FDEDEF;
  --semantic-info: #1677A8;
  --semantic-info-soft: #E9F5FA;

  /* ── Semantic: Surfaces & text ── */
  --color-primary: var(--brand-primary);
  --color-primary-hover: var(--brand-primary-hover);
  --color-primary-active: var(--brand-primary-active);
  --color-primary-soft: var(--brand-primary-soft);
  --color-secondary: var(--brand-secondary);
  --color-secondary-hover: var(--brand-secondary-hover);
  --color-secondary-soft: var(--brand-secondary-soft);
  --color-navy: var(--brand-navy);
  --color-cyan: var(--brand-cyan);

  --color-page: #F5F8FB;
  --color-customer-canvas: #EEF4F8;
  --color-customer-app: var(--neutral-white);
  --color-admin-page: #F5F8FB;
  --color-card: var(--neutral-white);
  --color-card-muted: var(--neutral-50);
  --color-sidebar: #073D70;
  --color-sidebar-hover: #0A4C86;
  --color-sidebar-active: #0B5A99;
  --color-overlay: rgba(12, 34, 54, 0.48);

  --color-text-primary: #172B3A;
  --color-text-secondary: #526574;
  --color-text-muted: #7D8D99;
  --color-text-inverse: var(--neutral-white);
  --color-link: var(--brand-primary);
  --color-link-hover: var(--brand-secondary);

  --color-border: #DCE5EC;
  --color-border-strong: #C7D4DE;
  --color-border-focus: var(--brand-secondary);
  --color-border-inverse: rgba(255, 255, 255, 0.24);

  --color-success: var(--semantic-success);
  --color-success-soft: var(--semantic-success-soft);
  --color-warning: var(--semantic-warning);
  --color-warning-soft: var(--semantic-warning-soft);
  --color-danger: var(--semantic-danger);
  --color-danger-soft: var(--semantic-danger-soft);
  --color-info: var(--semantic-info);
  --color-info-soft: var(--semantic-info-soft);

  /* ── Gradients ── */
  --gradient-brand-primary: linear-gradient(135deg, #064A87 0%, #087AB0 52%, #08A4D5 100%);
  --gradient-brand-subtle: linear-gradient(135deg, #EFF6FB 0%, #E8F8FC 100%);
  --gradient-hero-overlay: linear-gradient(135deg, rgba(6, 74, 135, 0.96) 0%, rgba(8, 164, 213, 0.86) 100%);
  --gradient-progress: linear-gradient(90deg, #064A87 0%, #08A4D5 100%);

  /* ── Typography ── */
  --font-latin: Inter, "Segoe UI", Arial, sans-serif;
  --font-arabic: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;
  --font-size-display: 44px;
  --line-height-tight: 1.2;
  --line-height-heading: 1.3;
  --line-height-body: 1.55;
  --line-height-relaxed: 1.7;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;

  /* ── Spacing ── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Radii ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-admin-card: 10px;
  --radius-button: 10px;
  --radius-input: 10px;
  --radius-mobile-frame: 28px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(15, 42, 62, 0.05);
  --shadow-sm: 0 2px 8px rgba(15, 42, 62, 0.07);
  --shadow-md: 0 8px 24px rgba(15, 42, 62, 0.10);
  --shadow-lg: 0 18px 46px rgba(15, 42, 62, 0.14);
  --shadow-card: var(--shadow-sm);
  --shadow-mobile-frame: 0 22px 64px rgba(8, 45, 76, 0.18);
  --shadow-focus: 0 0 0 3px rgba(8, 164, 213, 0.18);

  /* ── Layout ── */
  --admin-sidebar-width: 248px;
  --admin-sidebar-collapsed: 72px;
  --admin-topbar-height: 64px;
  --admin-content-max: 1600px;
  --admin-content-pad: 28px;
  --customer-frame-width: 430px;
  --customer-frame-max-height: 932px;
  --customer-header-height: 60px;
  --customer-bottom-nav-height: 72px;
  --customer-sticky-action-height: 80px;
  --customer-body-pad-x: 20px;
  --customer-body-pad-y: 20px;
  --touch-min: 48px;

  /* ── Motion ── */
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 260ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ── Breakpoints (reference) ── */
  --bp-xs: 360px;
  --bp-sm: 600px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* ── Component tokens ── */
  --button-height: 46px;
  --button-height-sm: 36px;
  --button-padding-x: 18px;
  --button-font-size: 14px;
  --button-font-weight: 600;
  --input-height: 48px;
  --input-bg: var(--neutral-white);
  --input-border: var(--neutral-300);
  --input-border-hover: var(--neutral-400);
  --input-border-focus: var(--brand-secondary);
  --input-placeholder: var(--color-text-muted);
  --input-label: var(--neutral-700);
  --chip-height: 26px;
  --toast-width: 360px;
  --modal-max-width: 560px;
  --progress-track: var(--neutral-200);
}