/* =============================================================
   Lusita Design System — Single Source of Truth
   All pages import this file. No page defines its own tokens.
   Reference: lusita-home.html (lusita.io)
   ============================================================= */

/* --- Design Tokens ---------------------------------------------------- */
:root, [data-theme="light"] {

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', Arial, sans-serif;

  /* Fluid type scale */
  --text-xs:  clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:  clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:  clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:  clamp(1.7rem, 1.2rem + 1.45vw, 2.55rem);
  --text-2xl: clamp(2.45rem, 1.5rem + 2.5vw, 4.5rem);

  /* Spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Colours — surfaces */
  --color-bg:             #f7f8fb;
  --color-surface:        #ffffff;
  --color-surface-2:      #f2f5fb;
  --color-surface-offset: #eaf0fb;
  --color-surface-accent: color-mix(in oklab, #1c46b7 5%, #ffffff);

  /* Colours — borders */
  --color-border:  rgba(17, 28, 58, 0.12);
  --color-divider: rgba(17, 28, 58, 0.10);

  /* Colours — text */
  --color-text:         #16203f;
  --color-text-muted:   #516081;
  --color-text-faint:   #7f8ba6;
  --color-text-inverse: #f9fbff;

  /* Colours — primary (Indigo) */
  --color-primary:           #1640C8;
  --color-primary-hover:     #1235A8;
  --color-primary-active:    #102980;
  --color-primary-highlight: #D6E3FF;

  /* Colours — gold accent */
  --color-gold:      #C9922A;
  --color-gold-soft: #F5E4C0;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(19, 31, 64, 0.05), 0 8px 20px rgba(19, 31, 64, 0.03);
  --shadow-md: 0 10px 28px rgba(19, 31, 64, 0.08), 0 2px 6px rgba(19, 31, 64, 0.05);
  --shadow-lg: 0 18px 50px rgba(19, 31, 64, 0.12), 0 4px 12px rgba(19, 31, 64, 0.08);

  /* Radii */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.125rem;
  --radius-xl:   1.5rem;
  --radius-full: 999px;

  /* Layout */
  --content-default: 1180px;

  /* Motion */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Backward-compatible aliases (Orbe css/style.css) ── */
  --azulejo:      var(--color-primary);
  --royal:        var(--color-primary-hover);
  --gold:         var(--color-gold);
  --bg:           var(--color-bg);
  --surface:      var(--color-surface);
  --surface-2:    var(--color-surface-2);
  --ink:          var(--color-text);
  --ink-muted:    var(--color-text-muted);
  --ink-soft:     var(--color-text-muted);
  --text:         var(--color-text);
  --text-muted:   var(--color-text-muted);
  --border:       var(--color-border);
  --border-light: var(--color-divider);
  --link:         var(--color-primary);
  --link-hover:   var(--color-primary-hover);
  --light-blue:   var(--color-primary-highlight);
  --ivory:        var(--color-surface-offset);
  --soft-blue:    var(--color-primary-active);
  --serif:        var(--font-display);
  --sans:         var(--font-body);
  --radius:       var(--radius-sm);
  --container:    var(--content-default);
  --gutter:       clamp(16px, 4vw, 40px);
  --shadow:       var(--shadow-md);
}

/* --- Dark Mode -------------------------------------------------------- */
[data-theme="dark"] {
  --color-bg:             #0f1424;
  --color-surface:        #151c30;
  --color-surface-2:      #1a233b;
  --color-surface-offset: #11192d;
  --color-surface-accent: color-mix(in oklab, #4f74e5 12%, #151c30);
  --color-border:         rgba(225, 232, 255, 0.12);
  --color-divider:        rgba(225, 232, 255, 0.09);
  --color-text:           #edf2ff;
  --color-text-muted:     #bbc7eb;
  --color-text-faint:     #8e9abe;
  --color-text-inverse:   #0f1424;
  --color-primary:        #7AA8FF;
  --color-primary-hover:  #94B5FF;
  --color-primary-active: #ADCAFF;
  --color-primary-highlight: #1A2B52;
  --color-gold:           #E5AA3C;
  --color-gold-soft:      #4A3514;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:             #0f1424;
    --color-surface:        #151c30;
    --color-surface-2:      #1a233b;
    --color-surface-offset: #11192d;
    --color-surface-accent: color-mix(in oklab, #4f74e5 12%, #151c30);
    --color-border:         rgba(225, 232, 255, 0.12);
    --color-divider:        rgba(225, 232, 255, 0.09);
    --color-text:           #edf2ff;
    --color-text-muted:     #bbc7eb;
    --color-text-faint:     #8e9abe;
    --color-text-inverse:   #0f1424;
    --color-primary:        #7AA8FF;
    --color-primary-hover:  #94B5FF;
    --color-primary-active: #ADCAFF;
    --color-primary-highlight: #1A2B52;
    --color-gold:           #E5AA3C;
    --color-gold-soft:      #4A3514;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.45);
  }
}

/* --- Global Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
body {
  min-height: 100dvh;
  line-height: 1.65;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background:
    radial-gradient(circle at top left,  color-mix(in oklab, var(--color-primary) 7%, transparent) 0, transparent 35%),
    radial-gradient(circle at bottom right, color-mix(in oklab, var(--color-gold) 10%, transparent) 0, transparent 28%),
    var(--color-bg);
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.04; text-wrap: balance; }
p { max-width: 70ch; color: var(--color-text-muted); }
::selection { background: color-mix(in oklab, var(--color-primary) 25%, transparent); }
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Container -------------------------------------------------------- */
.container,
.inner {
  width: min(100% - 2rem, var(--content-default));
  margin-inline: auto;
}

/* --- Skip Link -------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -3rem;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  z-index: 50;
}
.skip-link:focus { top: var(--space-4); }

/* --- Site Header / Nav ------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: color-mix(in oklab, var(--color-bg) 80%, transparent);
  border-bottom: 1px solid var(--color-divider);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 5rem;
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  color: var(--color-text);
  min-height: 44px;
}
.brand svg { width: 2.5rem; height: 2.5rem; color: var(--color-text); }
.brand-name {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* Nav links */
.main-nav {
  display: none;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.main-nav a { transition: color var(--transition-interactive); }
.main-nav a:hover { color: var(--color-primary); }

/* Header actions (toggle + CTA) */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Theme toggle */
.theme-toggle {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--transition-interactive), color var(--transition-interactive);
}
.theme-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* --- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.85rem 1.2rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--transition-interactive),
    background var(--transition-interactive),
    border-color var(--transition-interactive),
    color var(--transition-interactive),
    box-shadow var(--transition-interactive);
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: var(--color-primary-hover); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  background: var(--color-surface-2);
  border-color: color-mix(in oklab, var(--color-primary) 24%, var(--color-border));
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  font-weight: 600;
}

/* --- Eyebrow ---------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--text-xs);
  font-weight: 700;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

/* --- Responsive: show nav at 720px ------------------------------------ */
@media (min-width: 720px) {
  .main-nav { display: flex; }
}
@media (max-width: 719px) {
  .header-actions .btn { display: none; }
  .main-nav { display: none; }
  .brand-name { font-size: 1.5rem; }
}

/* --- Compass Rose SVG ------------------------------------------------- */
.compass-rose .orbe-g { fill: var(--color-gold); }
.compass-rose .orbe-b { fill: currentColor; }
.compass-rose .orbe-rg { fill: none; stroke: var(--color-gold); }
.compass-rose .orbe-rb { fill: none; stroke: currentColor; }