/* =========================================================
   Creative Lab — Type System v1.0
   Typeface: Inter 4 (variable, with optical size axis)
   Rule of thumb: Inter Display from 20px up, Inter below it.
   ========================================================= */

/* 1. Font file (self-hosted, keeps all OpenType features) */
@font-face {
  font-family: "Inter CL";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 2. Tokens */
:root {
  --cl-font: "Inter CL", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* text colors */
  --cl-ink: #000000;
  --cl-ink-muted: #4a4a4a;

  /* optical sizes: 14 = Inter (text), 32 = Inter Display */
  --cl-opsz-text: 14;
  --cl-opsz-display: 32;

  /* sizes: fluid between mobile and desktop */
  --cl-size-display: clamp(3.5rem, 2rem + 6vw, 7rem);          /* 56 to 112px */
  --cl-size-headline: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);    /* 32 to 52px */
  --cl-size-subhead: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); /* 20 to 26px */
  --cl-size-lead: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);     /* 20 to 24px */
  --cl-size-small-heading: 1.0625rem;                           /* 17px */
  --cl-size-ui: 1rem;                                           /* 16px */
  --cl-size-body: 1.0625rem;                                    /* 17px */
  --cl-size-label: 0.875rem;                                    /* 14px */

  /* weights: never above 600 */
  --cl-regular: 400;
  --cl-medium: 500;
  --cl-semibold: 600;

  /* tracking: the bigger the type, the tighter */
  --cl-track-display: -0.018em;
  --cl-track-headline: -0.012em;
  --cl-track-subhead: -0.01em;
  --cl-track-lead: -0.005em;
  --cl-track-small-heading: -0.01em;
  --cl-track-ui: 0em;
  --cl-track-body: 0.005em;
  --cl-track-label: 0.01em;

  /* leading */
  --cl-lead-display: 1;
  --cl-lead-headline: 1.05;
  --cl-lead-subhead: 1.25;
  --cl-lead-lead: 1.4;
  --cl-lead-small-heading: 1.3;
  --cl-lead-ui: 1.2;
  --cl-lead-body: 1.5;
  --cl-lead-label: 1.3;

  /* comfortable line length */
  --cl-measure: 66ch;
}

/* 3. Base */
html {
  font-family: var(--cl-font);
  color: var(--cl-ink);
  font-feature-settings: "ss01" 1;          /* open digits, everywhere */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  font-size: var(--cl-size-body);
  font-weight: var(--cl-regular);
  line-height: var(--cl-lead-body);
  letter-spacing: var(--cl-track-body);
  font-variation-settings: "opsz" var(--cl-opsz-text);
}
strong, b { font-weight: var(--cl-semibold); }
em, i { font-style: normal; }               /* no italics are loaded; never fake them */

/* 4. Roles */
.cl-display {
  font-size: var(--cl-size-display);
  font-weight: var(--cl-medium);
  line-height: var(--cl-lead-display);
  letter-spacing: var(--cl-track-display);
  font-variation-settings: "opsz" var(--cl-opsz-display);
  text-wrap: balance;
}
.cl-headline, h1, h2 {
  font-size: var(--cl-size-headline);
  font-weight: var(--cl-medium);
  line-height: var(--cl-lead-headline);
  letter-spacing: var(--cl-track-headline);
  font-variation-settings: "opsz" var(--cl-opsz-display);
  text-wrap: balance;
}
.cl-subhead, h3 {
  font-size: var(--cl-size-subhead);
  font-weight: var(--cl-semibold);
  line-height: var(--cl-lead-subhead);
  letter-spacing: var(--cl-track-subhead);
  font-variation-settings: "opsz" var(--cl-opsz-display);
  text-wrap: balance;
}
.cl-lead {
  font-size: var(--cl-size-lead);
  font-weight: var(--cl-regular);
  line-height: var(--cl-lead-lead);
  letter-spacing: var(--cl-track-lead);
  font-variation-settings: "opsz" var(--cl-opsz-display);
  max-width: var(--cl-measure);
  text-wrap: balance;
}
.cl-small-heading, h4 {
  font-size: var(--cl-size-small-heading);
  font-weight: var(--cl-semibold);
  line-height: var(--cl-lead-small-heading);
  letter-spacing: var(--cl-track-small-heading);
  font-variation-settings: "opsz" var(--cl-opsz-text);
}
.cl-body, p {
  font-size: var(--cl-size-body);
  font-weight: var(--cl-regular);
  line-height: var(--cl-lead-body);
  letter-spacing: var(--cl-track-body);
  font-variation-settings: "opsz" var(--cl-opsz-text);
  max-width: var(--cl-measure);
  text-wrap: pretty;
}
.cl-ui, nav a, button {
  font-family: var(--cl-font);
  font-size: var(--cl-size-ui);
  font-weight: var(--cl-medium);
  line-height: var(--cl-lead-ui);
  letter-spacing: var(--cl-track-ui);
  font-variation-settings: "opsz" var(--cl-opsz-text);
}
.cl-label {
  font-size: var(--cl-size-label);
  font-weight: var(--cl-medium);
  line-height: var(--cl-lead-label);
  letter-spacing: var(--cl-track-label);
  font-variation-settings: "opsz" var(--cl-opsz-text);
  text-transform: none;                    /* sentence case, never all caps */
}

/* 5. Helpers */
.cl-muted { color: var(--cl-ink-muted); }
.cl-num, table, time, .price { font-variant-numeric: tabular-nums; }  /* prices, dates, tables */
.cl-nowrap { white-space: nowrap; }        /* keep "BHD 6.000" and phone numbers together */

/* 6. Alignment: flush left, ragged right. Never justified. */
p, h1, h2, h3, h4, .cl-lead { text-align: left; hyphens: manual; }