/* ============================================================
   dev4ones.space — Colors & Type Foundations
   ------------------------------------------------------------
   A warm two-color palette derived from the existing site
   (cream background + deep warm ink), with a single warm
   accent (terracotta) substituting the original cool blue
   used in the Cloud Hosting page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Gloock&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&family=Special+Elite&display=swap');

:root {
  /* ---------- COLOR — Brand (2-color palette) ---------- */
  --sand:        #ede9e1;   /* primary warm background, the brand "canvas" */
  --terracotta:  #b85738;   /* primary warm accent — buttons, nav fills, links */

  /* ---------- COLOR — Tonal warm neutrals ---------- */
  --bone:        #f7f4ee;   /* lighter surface — cards on sand */
  --linen:       #e2dccf;   /* subtle divider / quiet surface */
  --ink:         #1a1a18;   /* primary text / dark surface */
  --ink-soft:    #2a2a25;   /* footer / secondary dark surface */
  --ash:         #5c554a;   /* muted body copy on light */
  --smoke:       #8a8174;   /* tertiary text, captions */

  /* ---------- COLOR — Accent tones (derived from terracotta) ---------- */
  --terracotta-deep: #8e3f26;  /* hover / pressed */
  --terracotta-soft: #d68a6e;  /* light tint — surfaces, focus rings */
  --terracotta-wash: #f3e2d8;  /* very light wash — pill backgrounds */

  /* ---------- COLOR — Utility ---------- */
  --white:       #ffffff;
  --black:       #000000;

  /* ---------- COLOR — Semantic (foreground / background) ---------- */
  --bg:          var(--sand);
  --bg-elevated: var(--bone);
  --bg-inverse:  var(--ink);
  --fg1:         var(--ink);       /* primary text on light */
  --fg2:         var(--ash);       /* secondary text on light */
  --fg3:         var(--smoke);     /* tertiary text on light */
  --fg-inverse:  var(--bone);      /* text on dark surfaces */
  --border:      rgba(26, 26, 24, 0.14);
  --border-strong: rgba(26, 26, 24, 0.28);
  --border-inverse: rgba(247, 244, 238, 0.22);
  --link:        var(--terracotta);
  --link-hover:  var(--terracotta-deep);

  /* ---------- TYPE — Families ---------- */
  --font-serif:  'Gloock', 'Playfair Display', Georgia, serif;       /* display only */
  --font-sans:   'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mark:   'Special Elite', 'Courier Prime', 'Courier New', monospace;  /* wordmark / typewriter */

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

  /* ---------- TYPE — Sizes (modular, ~1.25 ratio at large end) ---------- */
  --t-display-xl: clamp(3.5rem, 9vw, 7.8rem);   /* hero title — Gloock */
  --t-display-l:  clamp(3rem, 6vw, 5.5rem);     /* page headline — Gloock */
  --t-display-m:  clamp(2rem, 4.5vw, 3rem);     /* section title — Gloock */
  --t-h1:         clamp(2rem, 3.5vw, 2.75rem);
  --t-h2:         1.75rem;
  --t-h3:         1.25rem;
  --t-body-l:     1.05rem;
  --t-body:       1rem;
  --t-body-s:     0.9rem;
  --t-caption:    0.85rem;
  --t-micro:      0.75rem;

  /* ---------- TYPE — Line height / tracking ---------- */
  --lh-display: 1.0;
  --lh-tight:   1.1;
  --lh-snug:    1.35;
  --lh-body:    1.6;
  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;

  /* ---------- SPACING / RADII / ELEVATION ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(26, 26, 24, 0.06);
  --shadow-2: 0 4px 16px rgba(26, 26, 24, 0.10);
  --shadow-3: 0 12px 40px rgba(26, 26, 24, 0.18);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

/* ============================================================
   Semantic type roles — drop-in classes
   ============================================================ */

.t-display-xl {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-size: var(--t-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.t-display-l {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-size: var(--t-display-l);
  line-height: 0.95;
  letter-spacing: var(--ls-display);
}

.t-display-m {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-size: var(--t-display-m);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
}

h1, .t-h1 {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h2, .t-h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: 1;
  letter-spacing: -0.035em;
}

h3, .t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-h3);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

p, .t-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.t-body-l {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--t-body-l);
  line-height: var(--lh-body);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-caption);
  color: var(--fg2);
}

.t-micro {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg3);
}

code, .t-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--linen);
  padding: 0.1em 0.4em;
  border-radius: var(--r-sm);
}

em { font-style: italic; }
strong { font-weight: var(--w-semibold); }

a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }