/* Luxaro design tokens. Every colour, font, size and timing in styles.css
 * comes from here; change the brand in this file, not in styles.css.
 * One brand colour (purple, hue 300) on a dark charcoal base.
 * axes: dark / geometric-sans (bold) / chromatic-purple
 */
/* Self-hosted fonts (assets/web/fonts). Headings: Montserrat Alt1 (SIL OFL).
   Body: Figtree 400/500/600 (SIL OFL). */
@font-face { font-family: "Montserrat Alt1"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("assets/web/fonts/MontserratAlt1-Bold.woff2") format("woff2"); }
@font-face { font-family: "Montserrat Alt1"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("assets/web/fonts/MontserratAlt1-ExtraBold.woff2") format("woff2"); }
/* Owner disliked Alt1's three-bar capital E and crossbarless A: these later faces
   take only A and E (and accented forms) from standard Montserrat; every other
   letter stays Alt1. */
@font-face { font-family: "Montserrat Alt1"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("assets/web/fonts/Montserrat-Bold-latin.woff2") format("woff2");
  unicode-range: U+0041, U+0045, U+00C0-00C5, U+00C8-00CB; }
@font-face { font-family: "Montserrat Alt1"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("assets/web/fonts/Montserrat-ExtraBold-latin.woff2") format("woff2");
  unicode-range: U+0041, U+0045, U+00C0-00C5, U+00C8-00CB; }
@font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("assets/web/fonts/Figtree-Regular-latin.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("assets/web/fonts/Figtree-Medium-latin.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("assets/web/fonts/Figtree-SemiBold-latin.woff2") format("woff2"); }

:root {
  /* Charcoal base, barely tinted toward the brand hue */
  --color-bg:      oklch(16.5% 0.006 300);  /* page */
  --color-bg-2:    oklch(20.5% 0.007 300);  /* cards, form, media slots */
  --color-bg-3:    oklch(25% 0.008 300);    /* raised: hover, floating nav */
  --color-rule:    oklch(29% 0.008 300);
  --color-rule-2:  oklch(40% 0.010 300);

  --color-ink:     oklch(96% 0.004 300);
  --color-ink-2:   oklch(80% 0.008 300);
  --color-ink-3:   oklch(64% 0.010 300);

  /* The brand colour: one purple, two lightnesses */
  --color-brand:       oklch(56% 0.240 300);  /* fills: buttons, markers */
  --color-brand-hover: oklch(61% 0.230 300);
  --color-brand-text:  oklch(74% 0.170 300);  /* purple text and underlines on charcoal */
  --color-brand-deep:  oklch(43% 0.200 300);  /* large purple surfaces (contact panel) */
  --color-brand-line:  oklch(58% 0.160 300);  /* hairlines on the purple panel */
  --color-on-brand:    oklch(98% 0.004 300);  /* text on purple fill */
  --color-on-brand-2:  oklch(88% 0.050 300);  /* secondary text on purple */
  --color-focus:       oklch(78% 0.170 300);

  --color-error:    oklch(72% 0.160 25);
  --color-success:  oklch(78% 0.140 160);
  --color-veil:     oklch(12% 0.006 300 / 0.32);  /* light tint over hero footage (was 0.55); headline legibility comes from --color-text-shade */
  --color-text-shade: oklch(5% 0.006 300 / 0.7);   /* soft shadow behind hero text */
  --color-veil-strong: oklch(8% 0.006 300 / 0.72); /* behind the story dialog */
  --color-glass:    oklch(23% 0.008 300 / 0.88);  /* floating nav pill */
  --color-shadow:   oklch(5% 0.006 300 / 0.6);

  /* Type */
  --font-display: "Montserrat Alt1", "Arial", sans-serif;
  --font-body:    "Figtree", "Segoe UI", sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1.0625rem;
  --text-md:   1.1875rem;
  --text-lg:   clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);
  --text-xl:   clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --text-wordmark: 1.35rem;  /* header logo: its frame matches the 40px header buttons */
  --text-2xl:  clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --text-display: clamp(3.1rem, 1.8rem + 5.2vw, 6.5rem);

  /* Space: 4pt scale */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --section-pad: clamp(4.5rem, 3rem + 5vw, 8rem);
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --page-max:    76rem;
  --nav-h:       4rem;

  --radius-sm:   0.5rem;
  --radius-md:   0.875rem;
  --radius-pill: 999px;
  --rule-hair:   1px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-nav:    cubic-bezier(0.33, 1, 0.68, 1);  /* softer ease-out (cubic) for the header morph */
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  560ms;
  --dur-nav:   730ms;   /* header morph: between the original 560ms and the 900ms the owner tried */

  --z-raised: 10;
  --z-sticky: 200;
}