/* =========================================================================
   Zeus Design System — core foundations
   Source: Booking.com (B4B / Booking.com for Business) Zeus theme
   ========================================================================= */

/* Font note: uses SF Pro Text / Inter / system font stack.
   Inter is loaded via the application layout <link> tags. */

:root {
  /* ---- Brand (static, does not flip in dark mode) ---- */
  --static-black: #1a1a1a;
  --static-white: #ffffff;
  --brand-primary-muted-1: #1f53a2;
  --brand-primary: #003b95;      /* B4B deep blue — primary brand */
  --brand-primary-strong-1: #0d2b58;
  --brand-secondary-muted-1: #ffe9b5;
  --brand-secondary: #ffb700;    /* Booking yellow */
  --brand-secondary-strong-1: #946800;

  /* ---- Neutral scale ---- */
  --neutral-muted-4: #f5f5f5;
  --neutral-muted-3: #d9d9d9;
  --neutral-muted-2: #a2a2a2;
  --neutral-muted-1: #868686;
  --neutral-main:    #595959;
  --neutral-strong-1:#2b2b2b;
  --neutral-strong-2:#242424;
  --neutral-strong-3:#1a1a1a;

  /* ---- Primary (interactive blue) ---- */
  --primary-muted-3: #f0f6ff;
  --primary-muted-2: #cee6ff;
  --primary-muted-1: #57a6f4;
  --primary:         #006ce4;   /* Action blue, most interactive UI */
  --primary-strong-1:#0057b8;
  --primary-strong-2:#041b43;

  /* ---- Tertiary (yellow / info highlight) ---- */
  --tertiary-muted-3:#fffaec;
  --tertiary-muted-2:#ffe9b5;
  --tertiary-muted-1:#ffca49;
  --tertiary:        #ffb700;
  --tertiary-strong-1:#946800;

  /* ---- Semantic ---- */
  --success-muted-3: #f1fef6;
  --success-muted-2: #b4e9ca;
  --success-muted-1: #24a85b;
  --success:         #008234;
  --success-strong-1:#006629;

  --error-muted-3:   #fff5f5;
  --error-muted-2:   #fcc1c5;
  --error-muted-1:   #e56b74;
  --error:           #d4111e;
  --error-strong-1:  #af0e19;

  --warning-muted-3: #fef3ec;
  --warning-muted-2: #ffdabf;
  --warning-muted-1: #f89249;
  --warning:         #f56700;
  --warning-strong-1:#923e01;

  --info-muted-3:    #fffaec;
  --info-muted-2:    #ffe9b5;
  --info-muted-1:    #ffca49;
  --info:            #ffb700;

  /* ---- Text ---- */
  --fg-muted-1:      #595959;   /* secondary copy */
  --fg-main:         #1a1a1a;   /* default body text */
  --fg-strong:       #1a1a1a;   /* headings */
  --fg-inverted:     #f5f5f5;
  --fg-inverted-strong: #ffffff;

  /* ---- Surface ---- */
  --surface-neutral-3: #ffffff;
  --surface-neutral-2: #ffffff;
  --surface-neutral-1: #ffffff;
  --surface-primary-3: #ffffff;
  --surface-primary-2: #f0f6ff;
  --surface-primary-1: #cee6ff;

  /* ---- Border ---- */
  --border-muted-1:  #e7e7e7;
  --border-main:     #868686;
  --border-strong-1: #595959;
  --border-strong-2: #1a1a1a;

  /* ---- State ---- */
  --state-selected-bg: #cee6ff;
  --state-selected-border: #006ce4;
  --state-disabled-bg: #d9d9d9;
  --state-disabled-fg: #a2a2a2;
  --state-disabled-border: #d9d9d9;

  /* ---- Focus ring ---- */
  --focus-ring: #0057b8;

  /* ---- Elevation / shadow ---- */
  --shadow-1: 0 2px 8px  0 rgba(26,26,26,0.16);
  --shadow-2: 0 2px 16px 0 rgba(26,26,26,0.24);
  --shadow-3: 0 4px 16px 0 rgba(26,26,26,0.32);

  /* ---- Radius ---- */
  --radius-none: 0;
  --radius-sm: 4px;   /* fields, inline chips */
  --radius-md: 8px;   /* buttons, cards */
  --radius-lg: 16px;  /* large cards, sheets */
  --radius-full: 9999px;

  /* ---- Spacing (4-unit base) ---- */
  --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;

  /* ---- Border widths ---- */
  --bw-sm: 1px;
  --bw-md: 2px;
  --bw-lg: 4px;
  --bw-xl: 8px;

  /* ---- Breakpoints ---- */
  --bp-xs: 444px;
  --bp-sm: 600px;
  --bp-md: 900px;
  --bp-lg: 1200px;
  --bp-xl: 1536px;

  /* ---- Type families ---- */
  --font-primary: 'Inter', 'SF Pro Text', BlinkMacSystemFont, -apple-system,
                  'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-secondary: var(--font-primary);
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Font weights ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---- Type scale (raw) ---- */
  --text-5xl: 96px;
  --text-4xl: 64px;
  --text-3xl: 48px;
  --text-2xl: 32px;
  --text-xl: 24px;
  --text-lg: 20px;
  --text-md: 16px;
  --text-sm: 15px;
  --text-xs: 14px;
  --text-2xs: 13px;
  --text-3xs: 12px;
}

/* Dark mode override – set [data-mode="dark"] on root or container */
[data-mode='dark'] {
  color-scheme: dark;
  --neutral-muted-4: #242424;
  --neutral-muted-3: #595959;
  --neutral-muted-2: #868686;
  --neutral-muted-1: #a2a2a2;
  --neutral-main:    #d9d9d9;
  --neutral-strong-3:#ffffff;

  --primary-muted-3: #041b43;
  --primary-muted-2: #0057b8;
  --primary-muted-1: #006ce4;
  --primary:         #57a6f4;
  --primary-strong-1:#cee6ff;

  --fg-muted-1: #a2a2a2;
  --fg-main:    #ffffff;
  --fg-strong:  #ffffff;
  --fg-inverted: #242424;
  --fg-inverted-strong: #1a1a1a;

  --surface-neutral-3: #2b2b2b;
  --surface-neutral-2: #242424;
  --surface-neutral-1: #1a1a1a;
  --surface-primary-3: #2b2b2b;
  --surface-primary-2: #152133;
  --surface-primary-1: #0d2b58;

  --border-muted-1:  #868686;
  --border-main:     #a2a2a2;
  --border-strong-1: #d9d9d9;
  --border-strong-2: #ffffff;

  --state-selected-bg: #152133;
  --state-selected-border: #57a6f4;
  --focus-ring: #57a6f4;
}

/* =========================================================================
   Semantic typography — maps to Zeus z--typography-* tokens
   ========================================================================= */
body, .zds-body1 {
  font-family: var(--font-primary);
  font-size: var(--text-md);      /* 16 */
  line-height: 24px;
  font-weight: var(--fw-regular);
  color: var(--fg-main);
  -webkit-font-smoothing: antialiased;
}

.zds-h1 { font-size: var(--text-5xl); line-height: 108px; font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--fg-strong); }
.zds-h2 { font-size: var(--text-4xl); line-height:  72px; font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--fg-strong); }
.zds-h3 { font-size: var(--text-3xl); line-height:  62px; font-weight: var(--fw-bold); color: var(--fg-strong); }
.zds-h4 { font-size: var(--text-2xl); line-height:  40px; font-weight: var(--fw-bold); color: var(--fg-strong); }
.zds-h5 { font-size: var(--text-xl);  line-height:  32px; font-weight: var(--fw-bold); color: var(--fg-strong); }
.zds-h6 { font-size: var(--text-lg);  line-height:  28px; font-weight: var(--fw-bold); color: var(--fg-strong); }

.zds-subtitle1 { font-size: var(--text-md); line-height: 24px; font-weight: var(--fw-medium); }
.zds-subtitle2 { font-size: var(--text-xs); line-height: 20px; font-weight: var(--fw-medium); }
.zds-body2     { font-size: var(--text-xs); line-height: 20px; font-weight: var(--fw-regular); }
.zds-caption   { font-size: var(--text-3xs); line-height: 18px; font-weight: var(--fw-regular); color: var(--fg-muted-1); }

.zds-button-label { font-size: var(--text-xs); line-height: 20px; font-weight: var(--fw-medium); letter-spacing: 0; }
.zds-overline     { font-size: var(--text-3xs); line-height: 16px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted-1); }

code, kbd, samp, .zds-mono { font-family: var(--font-mono); font-size: 0.9em; }

/* Focus ring — applied to all interactive elements */
.zds-focus:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--bw-md) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}