/* =========================================================
   The Art of Living Digitally™ — Colors & Type
   --------------------------------------------------------
   The institutional system. Restrained. Composed. Lived-in.
   Pearl ground. Navy structure. Gold for legacy moments.
   Soft Aqua only as a digital accent.
   ========================================================= */

/* ----- Webfonts (Google Fonts mirror — see fonts/README.md) ----- */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Montserrat:wght@300;400;500;600;700&family=Playwrite+US+Modern:wght@300;400&display=swap");

:root {
  /* =====================================================
     CORE COLORS — the foundation
     ===================================================== */
  --ld-navy: #0D1B3D;          /* Structure */
  --ld-pearl: #EBDDC5;         /* Aspiration */

  /* CULTURAL / DEPTH / LEGACY / GUIDANCE */
  --ld-bronze: #824807;        /* Lived experience */
  --ld-forest: #1F3D2B;        /* Growth */
  --ld-gold:   #C9A24A;        /* Excellence, legacy */
  --ld-marian: #2B4593;        /* Direction, sacred */

  /* DIGITAL ACCENT — clarity, transformation */
  --ld-aqua:   #5FE0E6;

  /* Tonal extensions — derived from the core. Use sparingly. */
  --ld-navy-900: #060E22;
  --ld-navy-800: #0A1531;
  --ld-navy-700: #0D1B3D;      /* alias of core */
  --ld-navy-600: #182955;
  --ld-navy-500: #283E72;

  --ld-pearl-50:  #FBF6EC;
  --ld-pearl-100: #F4EBD9;
  --ld-pearl-200: #EBDDC5;     /* alias of core */
  --ld-pearl-300: #DCC9A8;
  --ld-pearl-400: #C8B188;

  --ld-gold-300: #E0C080;
  --ld-gold-400: #D4B062;
  --ld-gold-500: #C9A24A;      /* alias of core */
  --ld-gold-600: #A4812F;
  --ld-gold-700: #7E631F;

  --ld-bronze-400: #A56115;
  --ld-bronze-500: #824807;    /* alias of core */
  --ld-bronze-600: #5E3404;

  --ld-forest-400: #2C5A3F;
  --ld-forest-500: #1F3D2B;    /* alias of core */
  --ld-forest-600: #14271B;

  --ld-aqua-300: #9DEDF1;
  --ld-aqua-500: #5FE0E6;      /* alias of core */
  --ld-aqua-700: #2BAAB0;

  /* Neutral utilities — kept warm to harmonize with pearl */
  --ld-ink:    #0D1B3D;
  --ld-ink-2:  #2B3556;        /* secondary text on pearl */
  --ld-ink-3:  #5A6280;        /* tertiary text on pearl */
  --ld-line:   #D8C9AC;        /* hairline on pearl */
  --ld-line-2: #1A2A55;        /* hairline on navy */

  /* =====================================================
     SEMANTIC — surfaces & foreground
     ===================================================== */
  /* Light (Pearl) mode — the default institutional ground */
  --bg:        var(--ld-pearl-50);
  --surface:   var(--ld-pearl-100);
  --surface-2: var(--ld-pearl-200);
  --surface-elev: #FFFDF7;     /* card on pearl */

  --fg:        var(--ld-navy);
  --fg-2:      var(--ld-ink-2);
  --fg-3:      var(--ld-ink-3);
  --fg-on-navy: var(--ld-pearl-100);

  --accent:    var(--ld-gold);     /* legacy / excellence */
  --accent-2:  var(--ld-marian);   /* guidance */
  --accent-3:  var(--ld-aqua);     /* digital activation */

  --hairline:  var(--ld-line);

  /* Status (used very sparingly — institutional) */
  --status-ok:    var(--ld-forest);
  --status-warn:  var(--ld-bronze);
  --status-info:  var(--ld-marian);

  /* =====================================================
     TYPOGRAPHY — the three voices
     ===================================================== */
  --font-display: "Cormorant Garamond", "EB Garamond", "Garamond", Georgia, serif;
  --font-body:    "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-script:  "Playwrite US Modern", "Caveat", cursive;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Sizes — generous, composed */
  --fs-eyebrow:  0.6875rem;    /* 11px — small caps labels */
  --fs-caption:  0.8125rem;    /* 13px */
  --fs-body-sm:  0.875rem;     /* 14px */
  --fs-body:     1rem;         /* 16px */
  --fs-body-lg:  1.125rem;     /* 18px */
  --fs-h6:       1.25rem;      /* 20px */
  --fs-h5:       1.5rem;       /* 24px */
  --fs-h4:       2rem;         /* 32px */
  --fs-h3:       2.75rem;      /* 44px */
  --fs-h2:       3.75rem;      /* 60px */
  --fs-h1:       5rem;         /* 80px */
  --fs-display:  7rem;         /* 112px — covers, hero */

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Leading */
  --lh-tight:   1.05;
  --lh-display: 1.08;
  --lh-heading: 1.18;
  --lh-body:    1.6;
  --lh-loose:   1.75;

  /* Tracking */
  --tr-display: -0.01em;
  --tr-body: 0;
  --tr-eyebrow: 0.22em;        /* small caps labels */
  --tr-button:  0.14em;

  /* =====================================================
     SPACING — 4-pt base, calm rhythm
     ===================================================== */
  --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: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */
  --space-11: 12rem;    /* 192 — section breaks, editorial */

  /* =====================================================
     RADII — restrained, almost square
     ===================================================== */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 12px;
  --radius-pill: 999px;

  /* =====================================================
     ELEVATION — softer than typical SaaS, more "interior"
     ===================================================== */
  --shadow-1: 0 1px 2px rgba(13,27,61,0.06), 0 1px 1px rgba(13,27,61,0.04);
  --shadow-2: 0 4px 12px rgba(13,27,61,0.08), 0 2px 4px rgba(13,27,61,0.04);
  --shadow-3: 0 12px 32px rgba(13,27,61,0.12), 0 4px 8px rgba(13,27,61,0.06);
  --shadow-4: 0 28px 64px rgba(13,27,61,0.18), 0 8px 16px rgba(13,27,61,0.08);
  /* Gold/legacy glow — for crests and certificates */
  --shadow-gold: 0 0 0 1px rgba(201,162,74,0.45), 0 8px 32px rgba(201,162,74,0.18);
  /* Aqua/digital glow — neon billboard moments */
  --shadow-aqua: 0 0 24px rgba(95,224,230,0.45), 0 0 64px rgba(95,224,230,0.25);

  /* =====================================================
     MOTION — gentle, intentional
     ===================================================== */
  --ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.0, 0, 1);
  --ease-soft:     cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
  --dur-5: 800ms;

  /* =====================================================
     LAYOUT
     ===================================================== */
  --container-narrow: 720px;
  --container: 1080px;
  --container-wide: 1440px;
  --gutter: clamp(1rem, 4vw, 3rem);
}

/* ----- Optional Navy ground (institutional / hero) ----- */
[data-ground="navy"] {
  --bg: var(--ld-navy);
  --surface: var(--ld-navy-800);
  --surface-2: var(--ld-navy-600);
  --surface-elev: var(--ld-navy-700);
  --fg: var(--ld-pearl-100);
  --fg-2: rgba(235,221,197,0.78);
  --fg-3: rgba(235,221,197,0.55);
  --hairline: rgba(235,221,197,0.18);
  --accent: var(--ld-gold);
  --accent-2: var(--ld-aqua);
}

[data-ground="forest"] {
  --bg: var(--ld-forest);
  --surface: var(--ld-forest-600);
  --surface-2: var(--ld-forest-400);
  --surface-elev: #1A3424;
  --fg: var(--ld-pearl-100);
  --fg-2: rgba(235,221,197,0.78);
  --fg-3: rgba(235,221,197,0.55);
  --hairline: rgba(235,221,197,0.18);
  --accent: var(--ld-gold);
  --accent-2: var(--ld-aqua);
}

/* =========================================================
   Base type styles
   --------------------------------------------------------
   Display = Cormorant Garamond, slightly tightened, often
   in small caps for institutional moments.
   Body    = Montserrat, generous leading.
   Script  = Playwrite — used ONLY for personal storytelling
             cues ("Live It.", signatures). Not for UI.
   ========================================================= */

html {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);  /* Garamond reads strong at regular */
  letter-spacing: var(--tr-display);
  line-height: var(--lh-heading);
  color: var(--fg);
  margin: 0;
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-display); font-weight: var(--fw-light); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-display); font-weight: var(--fw-light); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); font-weight: var(--fw-medium); }
h6, .h6 { font-size: var(--fs-h6); font-weight: var(--fw-medium); }

.display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}

/* Institutional small caps — the brand's signature label voice.
   "WELCOME TO THE TECH LIFESTYLE", "SKILLS + LIFESTYLE = CULTURE", etc. */
.smallcaps,
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Garamond small caps variant (for editorial titles) */
.smallcaps-display {
  font-family: var(--font-display);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  font-weight: var(--fw-regular);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  text-wrap: pretty;
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.body-sm  { font-size: var(--fs-body-sm); }
.caption  { font-size: var(--fs-caption); color: var(--fg-3); }

/* Script — personal storytelling moments. Use sparingly. */
.script {
  font-family: var(--font-script);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.3;
}

/* Quote — editorial pull quote */
.pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg);
}

/* Lockup helper for the institutional signature */
.brand-mark {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: var(--fg);
}

/* Links — restrained, no underline by default; gold on hover. */
a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-2) var(--ease-soft),
              border-color var(--dur-2) var(--ease-soft);
}
a:hover { color: var(--accent); border-bottom-color: currentColor; }

/* Hairline rule — used as section separators */
hr.hairline {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: var(--space-7) 0;
}

/* Gold seal underline for editorial titles */
.seal-underline {
  display: inline-block;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--accent);
}

/* Responsive display sizing */
@media (max-width: 900px) {
  :root {
    --fs-h1: 3.25rem;
    --fs-h2: 2.5rem;
    --fs-h3: 2rem;
    --fs-display: 4rem;
  }
}