/* Estrella Technologies — canonical brand tokens (v1, 2026-05-26)
   Single source of truth. Linked from every public surface.
   Override sparingly; prefer adding semantic tokens here. */

:root {
  /* ── Dark surfaces ── */
  --deepest:    #0A0F0D;   /* page-bottom, footer, opaque headers */
  --deep:       #0F2419;   /* primary forest, hero, header bar */
  --card-dark:  #0F1A14;   /* dark card surface */
  --forest:     #1B4332;
  --mid:        #2D6A4F;
  --leaf:       #40916C;

  /* ── Light surfaces ── */
  --paper-tan:  #F1ECD8;   /* engineering paper bg */
  --paper-sheet:#FCFAF4;   /* off-white "sheet of paper" card */
  --cream:      #F8FAF7;

  /* ── Grid lines on engineering paper ── */
  --grid-fine:  rgba(82,140,90,0.18);
  --grid-heavy: rgba(82,140,90,0.32);

  /* ── Accents ── */
  --gold:       #C9A84C;
  --gold-l:     #E2CC7E;
  --light:      #5CDE9C;   /* neon emerald — small details only */
  --light-soft: #9FE2BA;   /* desaturated mint — for hero body type */
  --mint:       #B7E4C7;

  /* ── Text ── */
  --ink:        #0F2419;   /* headings on light */
  --body-dark:  #3D4F44;   /* body on light */
  --body-light: rgba(252,250,244,0.85);  /* body on dark */
  --body-muted: rgba(252,250,244,0.62);  /* muted body on dark */
  --muted:      #6B7F72;
  --paper-white:#FCFAF4;   /* near-white, never use pure #fff */

  /* ── Type stack ── */
  --serif: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, Menlo, monospace;
  --hand:  'Caveat', cursive;

  /* ── Radii ── */
  --r-btn:  8px;
  --r-card: 12px;
  --r-pill: 999px;

  /* ── Motion ── */
  --t-hover:  0.2s ease;
  --t-reveal: 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reusable engineering-paper surface */
.engineering-paper {
  background-color: var(--paper-tan);
  background-image:
    linear-gradient(to right, var(--grid-fine) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-fine) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-heavy) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-heavy) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px, 110px 110px, 110px 110px;
  background-attachment: local;
}

::selection { background: rgba(201,168,76,0.32); color: #FCFAF4; }