/* =========================================================
   Sacha Farias Designer — Foundations
   Premium · Dark · Editorial · Strategic
   ========================================================= */

/* ---------- Webfont imports (Google Fonts substitutes) ----------
   Brandbook calls for:
   • Serif elegant for titles → Cormorant Garamond
   • Sans-serif clean for body → Montserrat (named in brandbook)
   • Script/signature for accents → Italianno
   Self-hosted .woff2 in /fonts/ would replace these in production.
   ---------------------------------------------------------------- */
@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=Italianno&display=swap');

:root {
  /* =====================================================
     COLOR — Primary palette
     ===================================================== */

  /* Black — base of the brand */
  --sf-black:       #0B0B0D;   /* deep, near-pure black */
  --sf-black-pure:  #000000;
  --sf-graphite:    #1A1A1E;   /* charcoal for layered surfaces */
  --sf-graphite-2:  #25252B;   /* one step lighter, for cards on dark */
  --sf-graphite-3:  #34343B;   /* hairline borders on dark */

  /* Gold — accent / premium signal */
  --sf-gold:        #C9A24A;   /* warm gold, primary accent */
  --sf-gold-bright: #E5C271;   /* highlight, sparkle */
  --sf-gold-deep:   #8E6F2A;   /* shadow / pressed gold */
  --sf-gold-soft:   #D9BC75;   /* secondary gold for text on dark */

  /* Sage — signature differentiator */
  --sf-sage:        #8A9A7B;   /* sage/olive, signature color */
  --sf-sage-deep:   #5F6E54;   /* shadow sage */
  --sf-sage-soft:   #B8C2A8;   /* light sage for tints */

  /* Off-white — breathing room / editorial backgrounds */
  --sf-ivory:       #F2EDE2;   /* warm off-white, primary light bg */
  --sf-ivory-soft:  #F8F4EC;   /* almost-white panel */
  --sf-bone:        #E6DFCE;   /* darker ivory, dividers on light */

  /* Utility neutrals */
  --sf-line-dark:   rgba(201, 162, 74, 0.22);  /* gold hairline on dark */
  --sf-line-light:  rgba(11, 11, 13, 0.10);    /* black hairline on light */

  /* =====================================================
     COLOR — Semantic tokens
     ===================================================== */

  /* Dark theme (default — brand-primary surface) */
  --bg:             var(--sf-black);
  --bg-elevated:    var(--sf-graphite);
  --bg-elevated-2:  var(--sf-graphite-2);
  --surface:        var(--sf-graphite);
  --fg:             var(--sf-ivory);
  --fg-1:           var(--sf-ivory);      /* primary text */
  --fg-2:           #C7C3B7;              /* secondary text */
  --fg-3:           #8A8780;              /* tertiary text */
  --fg-muted:       #5C5A55;
  --accent:         var(--sf-gold);
  --accent-hover:   var(--sf-gold-bright);
  --accent-pressed: var(--sf-gold-deep);
  --signature:      var(--sf-sage);
  --hairline:       var(--sf-line-dark);
  --hairline-strong:rgba(201, 162, 74, 0.45);

  /* =====================================================
     TYPE — Families
     ===================================================== */
  --font-display:   'Cormorant Garamond', 'Cormorant', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:      'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:    'Italianno', 'Allura', 'Pinyon Script', cursive;
  --font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* =====================================================
     TYPE — Scale (modular ratio ~ 1.250, with editorial caps)
     ===================================================== */
  --fs-12:  0.75rem;     /* 12 — micro / eyebrow */
  --fs-13:  0.8125rem;   /* 13 — caption */
  --fs-14:  0.875rem;    /* 14 — small */
  --fs-15:  0.9375rem;
  --fs-16:  1rem;        /* 16 — body */
  --fs-18:  1.125rem;
  --fs-20:  1.25rem;
  --fs-24:  1.5rem;
  --fs-28:  1.75rem;
  --fs-32:  2rem;
  --fs-40:  2.5rem;
  --fs-48:  3rem;
  --fs-56:  3.5rem;
  --fs-72:  4.5rem;
  --fs-96:  6rem;
  --fs-128: 8rem;        /* editorial hero */

  /* Line-heights */
  --lh-tight:   1.05;  /* @kind font */
  --lh-display: 1.1;   /* @kind font */
  --lh-snug:    1.25;  /* @kind font */
  --lh-body:    1.55;  /* @kind font */
  --lh-loose:   1.75;  /* @kind font */

  /* Letter-spacing (tracking) */
  --ls-tight:   -0.02em;
  --ls-normal:  0;         /* @kind spacing */
  --ls-wide:    0.08em;
  --ls-wider:   0.18em;     /* eyebrow / caps labels */
  --ls-widest:  0.32em;     /* "DESIGNER"-style spaced caps */

  /* Weights */
  --w-light:    300;  /* @kind font */
  --w-regular:  400;  /* @kind font */
  --w-medium:   500;  /* @kind font */
  --w-semi:     600;  /* @kind font */
  --w-bold:     700;  /* @kind font */

  /* =====================================================
     SPACING — 4px base
     ===================================================== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* =====================================================
     RADIUS — restrained; brand favors crisp edges + occasional ovals
     ===================================================== */
  --r-0:   0;  /* @kind radius */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* =====================================================
     SHADOWS — soft on dark; gold-tinged for premium cards
     ===================================================== */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.6);
  --shadow-2: 0 6px 24px rgba(0,0,0,0.5);
  --shadow-3: 0 18px 48px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 0 1px rgba(201, 162, 74, 0.25), 0 14px 40px rgba(201, 162, 74, 0.08);
  --shadow-inset-line: inset 0 0 0 1px var(--hairline);

  /* Glow used for "sparkle" / sheen moments */
  --glow-gold:  0 0 16px rgba(229, 194, 113, 0.45), 0 0 40px rgba(201, 162, 74, 0.25);

  /* =====================================================
     MOTION
     ===================================================== */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast:    140ms;  /* @kind other */
  --dur-base:    260ms;  /* @kind other */
  --dur-slow:    480ms;  /* @kind other */
}

/* =========================================================
   LIGHT theme — for editorial / explainer surfaces
   Apply via [data-theme="light"] on a parent, e.g. <body>.
   ========================================================= */
[data-theme="light"] {
  --bg:            var(--sf-ivory);
  --bg-elevated:   var(--sf-ivory-soft);
  --bg-elevated-2: #FFFFFF;
  --surface:       var(--sf-ivory-soft);
  --fg:            var(--sf-black);
  --fg-1:          var(--sf-black);
  --fg-2:          #3A3A3F;
  --fg-3:          #6E6B63;
  --fg-muted:      #9B978E;
  --accent:        var(--sf-gold-deep);
  --accent-hover:  var(--sf-gold);
  --accent-pressed:#6E561E;
  --signature:     var(--sf-sage-deep);
  --hairline:      var(--sf-line-light);
  --hairline-strong: rgba(11,11,13,0.20);
}

/* =========================================================
   SEMANTIC TYPE — apply directly as classes or via tag-mapping
   ========================================================= */

/* Reset for typographic clarity */
.sf-reset, .sf-reset * { box-sizing: border-box; }
.sf-reset { color: var(--fg-1); background: var(--bg); font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }

/* Hero — editorial display, serif italic option for personality */
.sf-hero,
h1.sf-display {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: clamp(2.75rem, 7vw, var(--fs-128));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: pretty;
}

/* H1 — section opener */
.sf-h1,
h1 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-72);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

/* H2 — subsection / large feature */
.sf-h2,
h2 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-48);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

/* H3 — card title / feature head */
.sf-h3,
h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--fg-1);
}

/* H4 — small headline */
.sf-h4,
h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--fg-1);
}

/* Eyebrow / overline — the signature spaced caps from the logo */
.sf-eyebrow,
.sf-overline {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--accent);
}

/* Body */
.sf-body,
p {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}

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

.sf-small {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--fg-3);
}

.sf-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  letter-spacing: 0.04em;
  color: var(--fg-3);
}

/* Quote — editorial pull-quote, serif italic */
.sf-quote,
blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-regular);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  border-left: 1px solid var(--accent);
  padding-left: var(--sp-6);
}

/* Signature — script flourish, use SPARINGLY */
.sf-signature {
  font-family: var(--font-script);
  font-weight: var(--w-regular);
  font-size: var(--fs-48);
  line-height: 1;
  color: var(--accent);
}

/* Link */
.sf-link,
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sf-link:hover, a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }

/* Code/mono */
code, .sf-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--fg-2);
  background: var(--bg-elevated-2);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
}