/* MIREL — bundled stylesheet. Generated from styles.css + tokens/. */

/* tokens/fonts.css */
/* Typeface. Brand Guidelines v2.0 §06 specifies Inter Display Light for headlines and
   Inter Regular / Medium for body + UI. Inter Display is not publicly distributed, so the
   display role is served by Inter at weights 200-300 (see readme.md > Font substitutions). */

:root{
  --font-display:"Inter","Inter Display",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-label:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular","Menlo",monospace;
}

/* tokens/colors.css */
/* ── Brand palette (Guidelines §05) ─────────────────────────────────────────
   Recommended balance: Ivory 60% · Sand 20% · Charcoal 15% · Stone + Bronze 5% */
:root{
  --mirel-ivory:#F4F0E9;
  --mirel-sand:#D9D0C5;
  --mirel-stone:#B6A99C;
  --mirel-charcoal:#292B2D;
  --mirel-bronze:#A9825C;

  /* Neutral ramp derived from the five brand colours. Ivory -> Charcoal. */
  --neutral-0:#FBF9F5;
  --neutral-50:#F4F0E9;
  --neutral-100:#EBE5DC;
  --neutral-200:#D9D0C5;
  --neutral-300:#C8BBAA;
  --neutral-400:#B6A99C;
  --neutral-500:#97897C;
  --neutral-600:#747267;
  --neutral-700:#55575A;
  --neutral-800:#454648;
  --neutral-900:#292B2D;
  --neutral-950:#1C1E1F;

  /* Bronze accent ramp. Bronze is an accent, never the main event. */
  --bronze-200:#E2D3C2;
  --bronze-300:#C9A883;
  --bronze-400:#B99570;
  --bronze-500:#A9825C;
  --bronze-600:#8E6B49;
  --bronze-700:#6F543A;

  /* ── Product finish library (Guidelines §10) ───────────────────────────── */
  --finish-soft-sand:#C8BBAA;
  --finish-desert-taupe:#97897C;
  --finish-warm-stone:#B6A99C;
  --finish-olive-grey:#747267;
  --finish-graphite:#454648;
  --finish-charcoal:#292B2D;
  /* Material accents (Guidelines §09). Bronze + timber are accents only. */
  --material-bronze:#A9825C;
  --material-timber:#8A6A4B;
  --material-travertine:#E3DACB;
  --material-limestone:#EDE7DC;
  --material-terracotta:#A45F44;

  /* ── Semantic aliases ─────────────────────────────────────────────────── */
  --surface-page:#F4F0E9;
  --surface-raised:#FBF9F5;
  --surface-sunken:#EBE5DC;
  --surface-sand:#D9D0C5;
  --surface-inverse:#292B2D;
  --surface-inverse-raised:#33363A;
  --surface-overlay:rgba(41,43,45,.72);

  --text-primary:#292B2D;
  --text-secondary:#55575A;
  --text-muted:#97897C;
  --text-accent:#A9825C;
  --text-on-inverse:#F4F0E9;
  --text-on-inverse-muted:#B6A99C;
  --text-on-accent:#FBF9F5;

  --border-hairline:rgba(41,43,45,.14);
  --border-subtle:rgba(41,43,45,.22);
  --border-strong:#292B2D;
  --border-accent:#A9825C;
  --border-on-inverse:rgba(244,240,233,.20);

  --focus-ring:#A9825C;

  /* Status. Deliberately desaturated: the palette never shouts. */
  --status-success:#5E6B4F;
  --status-warning:#A9825C;
  --status-danger:#8C4B3C;
  --status-info:#55575A;

  /* Protection gradient for text over photography (§08 forbids decorative gradients;
     this is a legibility scrim, applied bottom-up only). */
  --scrim-bottom:linear-gradient(to top,rgba(28,30,31,.62) 0%,rgba(28,30,31,.28) 34%,rgba(28,30,31,0) 68%); /* @kind color */
  --scrim-full:linear-gradient(to top,rgba(28,30,31,.55) 0%,rgba(28,30,31,.15) 60%,rgba(28,30,31,.08) 100%); /* @kind color */
  --scrim-top:linear-gradient(to bottom,rgba(28,30,31,.34) 0%,rgba(28,30,31,.10) 46%,rgba(28,30,31,0) 100%); /* @kind color */
}

/* tokens/typography.css */
/* Light, modern, architectural. Hierarchy comes from scale, spacing and contrast —
   never from weight. Avoid anything above 500. (Guidelines §06) */
:root{
  --weight-extralight:200; /* @kind font */
  --weight-light:300; /* @kind font */
  --weight-regular:400; /* @kind font */
  --weight-medium:500; /* @kind font */

  /* Display / headline scale */
  --text-display-1:clamp(3.25rem,6.2vw,5.75rem);   /* 52 -> 92 */
  --text-display-2:clamp(2.5rem,4.4vw,4rem);       /* 40 -> 64 */
  --text-display-3:clamp(2rem,3.1vw,2.875rem);     /* 32 -> 46 */
  --text-heading-1:1.75rem;                        /* 28 */
  --text-heading-2:1.375rem;                       /* 22 */
  --text-heading-3:1.125rem;                       /* 18 */

  /* Body */
  --text-body-lg:1.125rem;   /* 18 — intro paragraphs */
  --text-body:1rem;          /* 16 */
  --text-body-sm:0.9375rem;  /* 15 */
  --text-caption:0.8125rem;  /* 13 */

  /* Labels: tracked caps. ARCHITECTURAL STORAGE / DUBAI / UAE */
  --text-label:0.75rem;      /* 12 */
  --text-label-sm:0.6875rem; /* 11 */

  --leading-display:1.06; /* @kind font */
  --leading-heading:1.22; /* @kind font */
  --leading-body:1.62; /* @kind font */
  --leading-loose:1.75; /* @kind font */
  --leading-label:1.2; /* @kind font */

  --tracking-display:-0.02em; /* @kind font */
  --tracking-heading:-0.01em; /* @kind font */
  --tracking-body:0em; /* @kind font */
  --tracking-label:0.22em; /* @kind font */
  --tracking-label-wide:0.32em; /* @kind font */
  --tracking-wordmark:0.4em; /* @kind font */

  --measure-narrow:34ch; /* @kind font */
  --measure-body:58ch; /* @kind font */
  --measure-wide:72ch; /* @kind font */
}

/* Narrow viewports: the display scale bottoms out lower than its clamp minimum so
   long words ("architecture") still fit a 390px column at light weights. */
@media (max-width:480px){
  :root{
    --text-display-1:2.625rem;  /* 42 */
    --text-display-2:2rem;      /* 32 */
    --text-display-3:1.625rem;  /* 26 */
    --text-body-lg:1.0625rem;   /* 17 */
  }
}

/* tokens/spacing.css */
/* 4px base. Section rhythm is deliberately large: 120-180px desktop (Guidelines §13). */
:root{
  --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;
  --space-24:96px;
  --space-30:120px;
  --space-36:144px;
  --space-45:180px;

  --section-y-sm:80px;
  --section-y:120px;
  --section-y-lg:180px;

  --gutter:24px;
  --gutter-lg:32px;
  --page-margin:32px;
  --page-margin-lg:64px;
}

/* tokens/layout.css */
/* 12-column desktop grid. Square or 2px radii only — never SaaS-rounded. */
:root{
  --grid-columns:12; /* @kind other */
  --container-max:1440px;
  --container-text:768px;
  --container-wide:1680px;

  --radius-none:0px;
  --radius-sharp:2px;   /* buttons, inputs, tags — the brand default */
  --radius-soft:4px;    /* the absolute maximum, used almost never */
  --radius-pill:999px;  /* reserved for the finish swatch dot only */

  --border-width-hairline:1px;
  --border-width:1px;
  --border-width-strong:2px;

  --rule-thin:1px;      /* fine rules are a primary graphic device (§07) */
  --rule-accent:2px;

  --aspect-portrait:4 / 5; /* @kind other */   /* native aspect of the MIREL render library */
  --aspect-landscape:16 / 9; /* @kind other */
  --aspect-panorama:21 / 9; /* @kind other */
  --aspect-square:1 / 1; /* @kind other */

  --header-height:76px; /* @kind spacing */
  --blur-glass:14px; /* @kind other */
}

/* tokens/motion.css */
/* Slow, architectural transitions: 500-900ms (Guidelines §13). Nothing bounces. */
:root{
  --duration-fast:180ms; /* @kind other */    /* colour-only state change on a control */
  --duration-base:320ms; /* @kind other */
  --duration-slow:520ms; /* @kind other */    /* default for anything the eye follows */
  --duration-slower:720ms; /* @kind other */
  --duration-reveal:900ms; /* @kind other */  /* image + section entrances */

  --ease-standard:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in-out:cubic-bezier(.65,.05,.36,1); /* @kind other */

  --transition-color:color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard); /* @kind other */
  --transition-reveal:opacity var(--duration-reveal) var(--ease-out),transform var(--duration-reveal) var(--ease-out); /* @kind other */
  --image-zoom:transform var(--duration-slower) var(--ease-out); /* @kind other */
  --image-zoom-scale:1.03; /* @kind other */
}

/* tokens/elevation.css */
/* "Minimal borders and shadows." Depth comes from a hairline or a reveal shadow,
   not from a card floating in space. Never use a shadow to signal hierarchy. */
:root{
  --shadow-none:none; /* @kind shadow */
  --shadow-reveal:0 1px 0 0 rgba(41,43,45,.10);            /* seam / tight reveal */
  --shadow-lift:0 8px 28px -18px rgba(41,43,45,.28);       /* menus, dialogs only */
  --shadow-overlay:0 24px 64px -32px rgba(28,30,31,.42);   /* modal surface */
  --inset-reveal:inset 0 -1px 0 0 rgba(41,43,45,.12);
  --inset-groove:inset 0 1px 2px 0 rgba(41,43,45,.10);
  --glow-warm:0 0 40px -8px rgba(169,130,92,.35);          /* the warm cove light in the renders */
}

/* tokens/base.css */
/* Minimal element defaults. Kept small on purpose: components carry their own styling. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-body);font-weight:var(--weight-regular);line-height:var(--leading-body);letter-spacing:var(--tracking-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-light);letter-spacing:var(--tracking-heading);line-height:var(--leading-heading);margin:0}
p{margin:0}
img{display:block;max-width:100%}
a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--border-subtle);padding-bottom:1px;transition:var(--transition-color)}
a:hover{color:var(--text-accent);border-bottom-color:var(--border-accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--bronze-200);color:var(--text-primary)}
hr{border:0;border-top:var(--rule-thin) solid var(--border-hairline);margin:0}