/* ============================================================
   SemCera Estudio — Foundations
   colors_and_type.css
   ============================================================ */

/* ---- Webfonts (Google Fonts — flagged substitutions) ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     COLOR — "Sine Cera": ink, paper, stone, with one drafting accent.
     The palette is austerely monochrome by intent. Any warmth comes
     from the bone/paper neutrals (Renaissance marble / unfinished plaster).
     ============================================================ */

  /* — Neutrals (bone → ink) — */
  --sc-bone:        #FAF7F0;  /* lightest paper, page bg                */
  --sc-paper:       #F4F0E8;  /* default page background                */
  --sc-carrara:     #ECE7DC;  /* surface raised / card on paper         */
  --sc-travertine:  #D9D2C2;  /* tonal divider, muted chip              */
  --sc-hairline:    #B8B0A4;  /* technical hairline, light border       */
  --sc-stone:       #787068;  /* secondary text                         */
  --sc-graphite:    #4A4641;  /* tertiary surface, dark chip            */
  --sc-ink-700:     #2A2826;  /* near-black, dark surface               */
  --sc-ink:         #0F0E0C;  /* primary ink, body text on light        */

  /* — Accent (drafting / annotation; used very sparingly) — */
  --sc-sanguine:    #8B3A2E;  /* sanguine — Renaissance red chalk        */
  --sc-sanguine-ink:#5C231B;  /* darker on-hover                         */
  --sc-blueprint:   #1F3A52;  /* optional technical blue, BIM data       */

  /* — Semantic surfaces (light theme — default) — */
  --bg:             var(--sc-paper);
  --bg-raised:      var(--sc-bone);
  --bg-sunken:      var(--sc-carrara);
  --bg-inverse:     var(--sc-ink);

  --fg:             var(--sc-ink);
  --fg-muted:       var(--sc-stone);
  --fg-subtle:      var(--sc-hairline);
  --fg-inverse:     var(--sc-bone);

  --border:         var(--sc-hairline);
  --border-strong:  var(--sc-graphite);
  --border-soft:    var(--sc-travertine);

  --accent:         var(--sc-sanguine);
  --accent-fg:      var(--sc-bone);
  --accent-hover:   var(--sc-sanguine-ink);

  /* ============================================================
     TYPE — Cormorant Garamond (display, Renaissance serif),
            Manrope (UI / body sans),
            JetBrains Mono (BIM data, dimensions, code).
     Cormorant is a Garamond revival with sculptural Renaissance
     proportions — chosen for "sine cera" / sculptor heritage.
     ============================================================ */

  --font-display:   'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-sans:      'Manrope', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* base type scale — 1.250 minor third, anchored at 16px */
  --fs-12: 0.75rem;     /* 12 — caption, micro                          */
  --fs-13: 0.8125rem;   /* 13 — eyebrow, label                          */
  --fs-14: 0.875rem;    /* 14 — small body                              */
  --fs-16: 1rem;        /* 16 — body                                    */
  --fs-18: 1.125rem;    /* 18 — lead                                    */
  --fs-22: 1.375rem;    /* 22 — h5                                      */
  --fs-28: 1.75rem;     /* 28 — h4                                      */
  --fs-36: 2.25rem;     /* 36 — h3                                      */
  --fs-48: 3rem;        /* 48 — h2                                      */
  --fs-64: 4rem;        /* 64 — h1                                      */
  --fs-96: 6rem;        /* 96 — display                                 */
  --fs-144:9rem;        /* 144 — hero display                           */

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --ls-display: -0.02em;   /* tight optical for big serifs              */
  --ls-tight:   -0.01em;
  --ls-normal:   0em;
  --ls-wide:     0.08em;   /* eyebrows / labels                         */
  --ls-wider:    0.16em;   /* small-caps style hairlines                */

  /* ============================================================
     SPACING — 4px base. Architectural rhythm.
     ============================================================ */
  --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;

  /* ============================================================
     RADII — almost none. Architecture = orthogonal.
     Used only on incidental UI (chips, avatars).
     ============================================================ */
  --r-0: 0;
  --r-1: 1px;
  --r-2: 2px;
  --r-4: 4px;
  --r-full: 999px;

  /* ============================================================
     ELEVATION — flat by default. Shadows are restrained.
     Prefer hairlines & negative space over shadow.
     ============================================================ */
  --shadow-hairline: 0 0 0 1px rgba(15,14,12,0.08);
  --shadow-sm:       0 1px 2px rgba(15,14,12,0.06), 0 0 0 1px rgba(15,14,12,0.04);
  --shadow-md:       0 4px 16px rgba(15,14,12,0.08), 0 0 0 1px rgba(15,14,12,0.04);
  --shadow-lg:       0 18px 48px rgba(15,14,12,0.14), 0 0 0 1px rgba(15,14,12,0.04);

  /* ============================================================
     MOTION — slow, considered. No bounces.
     ============================================================ */
  --ease-out:  cubic-bezier(0.16, 0.84, 0.30, 1.00);
  --ease-in:   cubic-bezier(0.50, 0.00, 0.84, 0.16);
  --ease-io:   cubic-bezier(0.65, 0.00, 0.35, 1.00);
  --dur-fast:   140ms;
  --dur-med:    260ms;
  --dur-slow:   520ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --max-w:    1280px;
  --gutter:   var(--sp-8);
  --rule:     1px;          /* hairline weight, draftsman pen           */
}

/* ============================================================
   Dark variant — "Sin Cera, Noche": paper inverted to ink.
   Apply via [data-theme="dark"] on <html> or any container.
   ============================================================ */
[data-theme="dark"] {
  --bg:            #0B0A09;
  --bg-raised:     #161513;
  --bg-sunken:     #050505;
  --fg:            var(--sc-bone);
  --fg-muted:      #B8B0A4;
  --fg-subtle:     #6B6660;
  --border:        #2A2826;
  --border-strong: #4A4641;
  --border-soft:   #1F1E1B;
  --accent:        #C26B5A;
  --accent-fg:     #0B0A09;
  --accent-hover:  #D98674;
}

/* ============================================================
   SEMANTIC TYPE — drop these classes (or selectors) anywhere.
   ============================================================ */

html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { font-size: var(--fs-16); line-height: var(--lh-normal); color: var(--fg); }

.sc-display, h1.sc-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(var(--fs-64), 8vw, var(--fs-144));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

.sc-h1, h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-64);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.sc-h2, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.sc-h3, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.sc-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-22);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.sc-h5, h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
}

.sc-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-22);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.sc-body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

.sc-small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.sc-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.sc-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-13);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg);
}

.sc-mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: 0;
  color: var(--fg);
}

.sc-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

/* technical dimension/spec line — common in arch drawings */
.sc-spec {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* hairline rule, draftsman pen */
.sc-rule {
  border: 0;
  border-top: var(--rule) solid var(--border);
  margin: var(--sp-6) 0;
}
.sc-rule--strong { border-top-color: var(--border-strong); }