/* =====================================================================
   Safa Tower Portal — Design Tokens
   --------------------------------------------------------------------- */

:root {
  /* ----- Primary palette --------------------------------------------- */
  --navy-deep:        #0E1A2C;
  --navy-base:        #16243C;
  --navy-soft:        #1F3050;
  --navy-line:        #2A3D5E;

  /* ----- Champagne gold ---------------------------------------------- */
  --gold:             #C9A961;
  --gold-soft:        #D8BB7A;
  --gold-deep:        #A88840;
  --gold-faint:       #F0E6CD;

  /* ----- Cream -------------------------------------------------------- */
  --cream:            #F5EDDC;
  --cream-soft:       #FAF6EC;
  --cream-line:       #E8DFC8;
  --warm-white:       #FFFFFF;

  /* ----- Text --------------------------------------------------------- */
  --text-on-dark:         #F5EDDC;
  --text-on-dark-muted:   #B5A87A;
  --text-on-cream:        #1A1712;
  --text-on-cream-muted:  #6B6357;

  /* ----- Status (muted) ---------------------------------------------- */
  --status-success:   #4A7C59;
  --status-warning:   #C9A961;
  --status-danger:    #B85450;
  --status-info:      #5B7896;
  --status-neutral:   #8A8278;

  /* ----- Status backgrounds (cream-tinted) --------------------------- */
  --status-success-bg: #E5EDE7;
  --status-warning-bg: #F6EFDB;
  --status-danger-bg:  #F2DEDD;
  --status-info-bg:    #E2E9F0;
  --status-neutral-bg: #ECEAE5;

  /* ----- Spacing (8px base) ------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;
  --space-10: 64px;

  /* ----- Radius ------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ----- Shadows ------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(14, 26, 44, 0.08);
  --shadow-md: 0 4px 12px rgba(14, 26, 44, 0.10);
  --shadow-lg: 0 12px 32px rgba(14, 26, 44, 0.14);

  /* ----- Typography --------------------------------------------------- */
  --font-serif:   "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-sans:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----- Type scale --------------------------------------------------- */
  --fs-display:   40px;
  --fs-h1:        32px;
  --fs-h2:        24px;
  --fs-h3:        18px;
  --fs-body:      14px;
  --fs-small:     12px;
  --fs-eyebrow:   11px;

  --lh-tight:     1.15;
  --lh-snug:      1.25;
  --lh-normal:    1.4;
  --lh-relaxed:   1.55;

  /* ----- Layout ------------------------------------------------------- */
  --sidebar-width:   240px;
  --topbar-height:   64px;
  --content-max:     1280px;

  /* ----- Motion ------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   120ms;
  --t-base:   200ms;
  --t-slow:   320ms;

  /* ----- Z-index ------------------------------------------------------ */
  --z-sidebar:   30;
  --z-topbar:    40;
  --z-modal:     90;
  --z-toast:    100;
}

/* ---------------------------------------------------------------------
   Reset & globals
   --------------------------------------------------------------------- */

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

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-on-cream);
  background: var(--cream-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { min-height: 100vh; }

a {
  color: var(--gold-deep);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--gold); }

button { font-family: inherit; }

/* Headings — serif by default */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
  color: var(--text-on-cream);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); }
h2 { font-size: var(--fs-h2); font-weight: 500; }
h3 {
  font-size: var(--fs-h3);
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: var(--lh-normal);
}

p { margin: 0 0 var(--space-3); }

/* Eyebrow label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-on-cream-muted);
}

.numeric { font-family: var(--font-mono); font-weight: 500; }

/* Gold hairline rule */
.gold-rule {
  border: 0;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
  margin: var(--space-5) 0;
}

/* Visually hidden (accessible) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}