/* Sauloh.psi — estilos consolidados */

/* ===== tokens/fonts.css ===== */
/* ============================================================
   Sauloh.psi — Fonts
   SUBSTITUTION NOTE: The brand has no licensed font files yet.
   These Google Fonts are chosen to echo the logo:
     - Marcellus  → Trajan-like elegant roman caps (the SAULO.H.PSI lettering)
     - Cormorant Garamond → editorial serif for large quotes / lockups
     - Mulish     → warm humanist sans for body & UI
   Replace with the brand's true fonts when available.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Mulish:wght@300;400;500;600;700;800&display=swap');


/* ===== tokens/colors.css ===== */
/* ============================================================
   Sauloh.psi — Color tokens
   Brand DNA: deep navy + warm gold on cream. Calm, clinical,
   welcoming. Sage + cobalt are editorial accents drawn from
   the brand illustration; use sparingly.
   ============================================================ */
:root {
  /* ---- Navy (primary / ink) ---- */
  --navy-900: #1b2632;
  --navy-800: #273543; /* brand base */
  --navy-700: #33475a;
  --navy-600: #455a6d;
  --navy-500: #5d7286;
  --navy-400: #8595a5;
  --navy-300: #b3bec8;

  /* ---- Gold (accent) ---- */
  --gold-700: #7c5f33;
  --gold-600: #8f6f3a;
  --gold-500: #ad894d; /* brand base */
  --gold-400: #c1a067;
  --gold-300: #d6bd8e;
  --gold-200: #e8d8b8;
  --gold-100: #f3e9d4;

  /* ---- Cream / warm neutrals ---- */
  --cream:     #fdfcf7; /* page base */
  --sand-50:   #f7f4ec;
  --sand-100:  #efeae0;
  --sand-200:  #e3ddd0;
  --stone-300: #cbc4b4;
  --stone-400: #a59d8c;
  --stone-500: #7d7768;
  --ink-600:   #5b554a;
  --white:     #ffffff;

  /* ---- Editorial accents (use sparingly) ---- */
  --sage-500: #8aa090;
  --sage-300: #b9c8bc;
  --sage-100: #e2e9e2;
  --cobalt:   #2330c8;

  /* ---- Semantic: text ---- */
  --text-strong:  var(--navy-900);
  --text-body:    #2f3a44;
  --text-muted:   var(--ink-600);
  --text-faint:   var(--stone-400);
  --text-gold:    var(--gold-600);
  --text-on-dark: var(--cream);
  --text-on-gold: var(--navy-900);

  /* ---- Semantic: surfaces ---- */
  --surface-page:   var(--cream);
  --surface-card:   var(--white);
  --surface-sand:   var(--sand-50);
  --surface-sunken: var(--sand-100);
  --surface-dark:   var(--navy-800);
  --surface-gold:   var(--gold-500);
  --surface-overlay: rgba(27, 38, 50, 0.55);

  /* ---- Semantic: borders ---- */
  --border-subtle: var(--sand-200);
  --border-default: var(--stone-300);
  --border-strong: var(--navy-300);
  --border-gold:   var(--gold-300);
  --border-dark:   rgba(253, 252, 247, 0.16);

  /* ---- Semantic: interactive ---- */
  --action-primary:       var(--navy-800);
  --action-primary-hover: var(--navy-700);
  --action-primary-press: var(--navy-900);
  --action-gold:          var(--gold-500);
  --action-gold-hover:    var(--gold-600);
  --action-gold-press:    var(--gold-700);
  --focus-ring:           rgba(173, 137, 77, 0.45);

  /* ---- Status ---- */
  --success:    #4f7d5b;
  --success-bg: #e6efe7;
  --warning:    #b07d2c;
  --warning-bg: #f6ecd6;
  --danger:     #b1504a;
  --danger-bg:  #f3e2e0;
  --info:       var(--navy-600);
  --info-bg:    #e7ecf1;
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   Sauloh.psi — Typography tokens
   Marcellus (display caps) · Cormorant Garamond (editorial serif)
   · Mulish (body / UI).
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Mulish', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --fw-light: 300; /* @kind other */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-extrabold: 800; /* @kind other */

  /* ---- Fluid display sizes (Marcellus / Cormorant) ---- */
  --text-display-xl: clamp(2.75rem, 5.5vw, 4.5rem);   /* hero */
  --text-display-lg: clamp(2.25rem, 4vw, 3.25rem);    /* section hero */
  --text-display-md: clamp(1.75rem, 2.8vw, 2.5rem);   /* page titles */
  --text-display-sm: clamp(1.4rem, 2vw, 1.85rem);     /* card titles */

  /* ---- Body scale (Mulish) ---- */
  --text-xl:   1.375rem;  /* 22 lead paragraph */
  --text-lg:   1.125rem;  /* 18 */
  --text-base: 1rem;      /* 16 */
  --text-sm:   0.875rem;  /* 14 */
  --text-xs:   0.75rem;   /* 12 labels */

  /* ---- Line heights ---- */
  --leading-tight: 1.12; /* @kind other */
  --leading-snug: 1.3; /* @kind other */
  --leading-normal: 1.55; /* @kind other */
  --leading-relaxed: 1.7; /* @kind other */

  /* ---- Letter spacing ---- */
  --tracking-display: 0.01em; /* @kind other */
  --tracking-caps: 0.22em; /* @kind other */
  --tracking-label: 0.12em; /* @kind other */
  --tracking-normal: 0; /* @kind other */

  /* ---- Eyebrow / label ---- */
  --eyebrow-size: 0.78rem; /* @kind font */
}

/* ---- Optional helper classes (consumers may use tokens directly) ---- */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
}
.t-serif {
  font-family: var(--font-serif);
  line-height: var(--leading-snug);
  color: var(--text-strong);
}
.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  color: var(--text-body);
}
.t-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-gold);
}
.t-caps {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   Sauloh.psi — Spacing, radius, layout tokens
   Calm, generous rhythm built on a 4px base.
   ============================================================ */
:root {
  --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 */

  /* ---- Radii — soft, rounded, welcoming ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-wide: 1380px;
  --gutter: clamp(1.25rem, 5vw, 4rem); /* @kind spacing */
  --section-y: clamp(4rem, 9vw, 8rem); /* @kind spacing */
}


/* ===== tokens/effects.css ===== */
/* ============================================================
   Sauloh.psi — Elevation, shadows, motion
   Shadows are warm-tinted and soft (navy-based, low opacity) —
   never harsh black. Motion is gentle and unhurried.
   ============================================================ */
:root {
  /* ---- Shadows (warm navy tint, soft) ---- */
  --shadow-xs: 0 1px 2px rgba(27, 38, 50, 0.06);
  --shadow-sm: 0 2px 8px rgba(27, 38, 50, 0.07);
  --shadow-md: 0 8px 24px rgba(27, 38, 50, 0.09);
  --shadow-lg: 0 18px 48px rgba(27, 38, 50, 0.12);
  --shadow-xl: 0 30px 70px rgba(27, 38, 50, 0.16);
  --shadow-gold: 0 12px 32px rgba(173, 137, 77, 0.22);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---- Hairline ring (for crisp card edges over cream) ---- */
  --ring-hairline: 0 0 0 1px var(--border-subtle);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-gentle: cubic-bezier(0.45, 0.05, 0.2, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* ---- Backdrop ---- */
  --blur-glass: blur(14px) saturate(1.05); /* @kind other */
}


/* ===== tokens/base.css ===== */
/* ============================================================
   Sauloh.psi — Base / reset
   Light, opt-in resets and page defaults.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--leading-tight);
  color: var(--text-strong);
  margin: 0 0 0.4em;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-gold); text-decoration: none; }
a:hover { color: var(--gold-700); }

::selection { background: var(--gold-200); color: var(--navy-900); }

img { max-width: 100%; display: block; }


/* ===== página ===== */
html, body { margin: 0; height: 100%; background: var(--surface-page); }
#site { height: 100vh; overflow-y: auto; scroll-behavior: smooth; }
@media (max-width: 900px) {
  .hero-grid, .about-grid, .contact-grid { grid-template-columns: 1fr !important; }
  .site-nav { display: none !important; }
}