/* ============================================================
   NŌMA — Colour tokens
   Palette sampled directly from the NŌMA Brand Book.
   "Eggshell and maroon, inspired by the colours of Egypt.
    Timeless and authentic." Sub-brands carry their own accent:
    Nōmadica (boutique) = terracotta, Stays (vacation) = sky,
    Living (residential) = pistachio.
   ============================================================ */

:root {
  /* ---- Maroon (primary brand) — sampled #4A1514 ---- */
  --maroon-900: #260a09;
  --maroon-800: #360f0e;
  --maroon-700: #4a1514;   /* PRIMARY brand maroon */
  --maroon-600: #5f1e1b;   /* grain / cover background */
  --maroon-500: #74302a;   /* hover-lighten on dark */
  --maroon-400: #8f4a43;
  --maroon-300: #b07f79;

  /* ---- Eggshell / cream (primary surface) — sampled #E8E2CA ---- */
  --eggshell-50:  #f6f2e4;
  --eggshell-100: #efead6;
  --eggshell-200: #e8e2ca;  /* PRIMARY eggshell surface */
  --eggshell-300: #ddd5b9;
  --eggshell-400: #cabf9c;  /* lines / dividers on light */

  /* ---- Terracotta — Nōmadica boutique hotels — sampled #92452B ---- */
  --terracotta-700: #6f3320;
  --terracotta-600: #823b25;
  --terracotta-500: #92452b;  /* accent */
  --terracotta-400: #a85838;
  --terracotta-300: #c5876b;

  /* ---- Sky blue — Nōma Stays / vacation homes — sampled #C7D9ED ---- */
  --sky-500: #c7d9ed;
  --sky-400: #aac4e2;
  --sky-600: #8aa9cf;
  --sky-700: #5e7fa6;

  /* ---- Pistachio — Nōma Living / residential — sampled #BAC697 ---- */
  --pistachio-500: #bac697;
  --pistachio-400: #a4b47b;
  --pistachio-600: #879864;
  --pistachio-700: #5f6e45;

  /* ---- Neutral ink (warm, derived from maroon) ---- */
  --ink-900: #2b1715;
  --ink-700: #4a322e;
  --ink-500: #6f534d;
  --ink-300: #9c837c;

  /* ============================================================
     SEMANTIC ALIASES — reach for these in product work
     ============================================================ */

  /* Surfaces (light / eggshell mode is the default brand mode) */
  --surface-page:    var(--eggshell-200);
  --surface-card:    var(--eggshell-100);
  --surface-raised:  var(--eggshell-50);
  --surface-sunken:  var(--eggshell-300);
  --surface-inverse: var(--maroon-700);

  /* Text */
  --text-strong:  var(--maroon-700);
  --text-body:    var(--ink-700);
  --text-muted:   var(--ink-500);
  --text-on-dark: var(--eggshell-200);
  --text-on-dark-muted: rgba(232, 226, 202, 0.66);
  --text-accent:  var(--terracotta-500);

  /* Brand / action */
  --color-primary:        var(--maroon-700);
  --color-primary-hover:  var(--maroon-600);
  --color-primary-press:  var(--maroon-800);
  --color-accent:         var(--terracotta-500);
  --color-accent-hover:   var(--terracotta-400);
  --color-accent-press:   var(--terracotta-600);

  /* Lines / borders */
  --line-soft:    rgba(74, 21, 20, 0.14);
  --line:         rgba(74, 21, 20, 0.22);
  --line-strong:  rgba(74, 21, 20, 0.40);
  --line-on-dark: rgba(232, 226, 202, 0.22);

  /* Sub-brand accents (collection coding) */
  --brand-nomadica: var(--terracotta-500);  /* boutique hotels */
  --brand-stays:    var(--sky-600);          /* vacation homes  */
  --brand-living:   var(--pistachio-600);    /* residential     */

  /* Status — pulled from the brand palette, not generic web colours */
  --status-success: var(--pistachio-700);
  --status-info:    var(--sky-700);
  --status-warning: var(--terracotta-500);
  --status-danger:  #a3271f;

  /* Focus ring */
  --focus-ring: var(--terracotta-400);
}
/* ============================================================
   NŌMA — Typography tokens
   Brand fonts (per brand book): Lineal (PRIMARY — Thin + Medium),
   EB Garamond (editorial serif), DecoType Naskh (Arabic).
   Lineal is now self-hosted from the official Velvetyne release
   (SIL Open Font License 1.1 — see assets/fonts/OFL.txt).
     Lineal (geometric sans, PRIMARY)  -> self-hosted (exact)
     EB Garamond (editorial serif)     -> EB Garamond (exact)
     DecoType Naskh (Arabic)           -> Amiri       (substitute)
   NOTE on weights: Lineal's named weights are non-standard —
   Thin=200, Light=300, Regular=400, Medium=600, Bold=700.
   The @font-face ranges below normalise CSS weights onto the
   four shipped faces, so the brand's two stars — Lineal Thin
   and Lineal Medium — render correctly everywhere.
   ============================================================ */

/* Self-hosted Lineal (Velvetyne, OFL 1.1). woff2 + woff fallback. */
@font-face {
  font-family: 'Lineal';
  src: url('assets/fonts/Lineal-Thin.woff2') format('woff2'),
       url('assets/fonts/Lineal-Thin.woff') format('woff');
  font-weight: 1 250;          /* Lineal Thin — brand display weight */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lineal';
  src: url('assets/fonts/Lineal-Regular.woff2') format('woff2'),
       url('assets/fonts/Lineal-Regular.woff') format('woff');
  font-weight: 251 450;        /* Lineal Regular — body */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lineal';
  src: url('assets/fonts/Lineal-Medium.woff2') format('woff2'),
       url('assets/fonts/Lineal-Medium.woff') format('woff');
  font-weight: 451 650;        /* Lineal Medium — brand heading/label weight */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lineal';
  src: url('assets/fonts/Lineal-Bold.woff2') format('woff2'),
       url('assets/fonts/Lineal-Bold.woff') format('woff');
  font-weight: 651 1000;       /* Lineal Bold — strong emphasis */
  font-style: normal;
  font-display: swap;
}

/* EB Garamond (exact) + Amiri (Arabic) still come from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Amiri:ital@0;1&display=swap');

:root {
  /* ---- Families ---- */
  --font-sans:    'Lineal', 'Helvetica Neue', Arial, sans-serif;   /* workhorse: UI, body, most headings */
  --font-display: 'Lineal', 'Helvetica Neue', Arial, sans-serif;   /* elegant display — set in Thin       */
  --font-serif:   'EB Garamond', Georgia, serif;                   /* editorial accents, pull quotes      */
  --font-arabic:  'Amiri', 'Times New Roman', serif;               /* Arabic / bilingual lockups          */
  --font-numeral: 'Lineal', 'Helvetica Neue', Arial, sans-serif;   /* data & figures (tabular-nums)       */

  /* ---- Weights (mapped onto Lineal's shipped faces) ---- */
  --fw-light:   200; /* @kind font */ /* -> Lineal Thin   */
  --fw-regular: 400; /* @kind font */ /* -> Lineal Regular*/
  --fw-medium:  600; /* @kind font */ /* -> Lineal Medium */
  --fw-semibold:600; /* @kind font */ /* -> Lineal Medium */
  --fw-bold:    700; /* @kind font */ /* -> Lineal Bold   */

  /* ---- Type scale (1.25 major-third, 16px base) ---- */
  --text-2xs:  0.6875rem;  /* 11px — micro labels   */
  --text-xs:   0.75rem;    /* 12px                  */
  --text-sm:   0.875rem;   /* 14px                  */
  --text-base: 1rem;       /* 16px                  */
  --text-md:   1.125rem;   /* 18px                  */
  --text-lg:   1.375rem;   /* 22px                  */
  --text-xl:   1.75rem;    /* 28px                  */
  --text-2xl:  2.25rem;    /* 36px                  */
  --text-3xl:  3rem;       /* 48px                  */
  --text-4xl:  4rem;       /* 64px                  */
  --text-5xl:  5.5rem;     /* 88px — hero           */
  --text-6xl:  7.5rem;     /* 120px — display       */

  /* ---- Line heights ---- */
  --leading-tight:   1.04;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Tracking (the brand leans on wide, deco letterspacing) ---- */
  --tracking-tightest: -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.16em;
  --tracking-widest:   0.28em;   /* eyebrow labels, the brand's signature spaced caps */
}
/* ============================================================
   NŌMA — Spacing, radius, shadow, layout tokens
   The brand reads editorial and architectural: generous air,
   mostly squared geometry, the circle reserved for the Ō mark.
   ============================================================ */

:root {
  /* ---- Spacing (4px base grid) ---- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 5rem;      /* 80 */
  --space-11: 6rem;      /* 96 */
  --space-12: 8rem;      /* 128 */

  /* ---- Radii — kept tight & editorial; circle only for the Ō ---- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-app:  24%;     /* app-icon squircle (per icon-usage page) */
  --radius-pill: 999px;
  --radius-full: 50%;     /* the Ō */

  /* ---- Shadows — warm, soft, print-like. Borders do most of the work ---- */
  --shadow-xs: 0 1px 2px rgba(43, 13, 12, 0.06);
  --shadow-sm: 0 2px 8px rgba(43, 13, 12, 0.08);
  --shadow-md: 0 8px 24px rgba(43, 13, 12, 0.10);
  --shadow-lg: 0 18px 48px rgba(43, 13, 12, 0.16);
  --shadow-inset: inset 0 0 0 1px var(--line-soft);

  /* ---- Layout ---- */
  --container-max: 1200px;  /* @kind spacing */
  --container-wide: 1440px; /* @kind spacing */
  --gutter: clamp(1.25rem, 4vw, 4rem); /* @kind spacing */

  /* ---- Motion (restrained, editorial fades & eases) ---- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:  140ms; /* @kind other */
  --dur-mid:   260ms; /* @kind other */
  --dur-slow:  520ms; /* @kind other */

  /* ---- Grain / texture opacity (the brand's signature film grain) ---- */
  --grain-opacity: 0.08; /* @kind other */
}
/* ============================================================
   NŌMA — Base element defaults + signature utilities
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--terracotta-500); color: var(--eggshell-50); }

/* ---- Headings default to the geometric sans, tightly set ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

a { color: var(--text-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

p { text-wrap: pretty; }

/* ============================================================
   SIGNATURE UTILITIES
   ============================================================ */

/* Eyebrow / kicker — the brand's spaced-out caps label */
.noma-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* Elegant display — big statements set in Lineal Thin */
.noma-display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
}

/* Editorial serif accent */
.noma-serif { font-family: var(--font-serif); }

/* Tabular figures for data */
.noma-numeral { font-family: var(--font-numeral); font-variant-numeric: tabular-nums; }

/* Film-grain overlay — drop inside any positioned brand surface.
   Pairs with maroon/terracotta backgrounds for the vintage look. */
.noma-grain { position: relative; isolation: isolate; }
.noma-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Hairline divider in brand line colour */
.noma-rule { border: 0; border-top: 1px solid var(--line); }

/* ===== DecoType Naskh (Arabic) — self-hosted exact brand font ===== */
@font-face {
  font-family: 'DecoType Naskh';
  src: url('assets/fonts/DecoType-Naskh.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root { --font-arabic: 'DecoType Naskh', 'Amiri', 'Times New Roman', serif; }