/* ============================================================
   AYNI — Colors & Type
   Quechuan: reciprocity. The space between two things is the brand.
   Palette = twilight. Late evening light through a purple curtain.
   ============================================================ */

/* ---- Fonts (Google Fonts) ----
   Display:  Newsreader  — careful speech, literary, breathes
   Body:     DM Sans     — approachable, the family thread
   Mono:     JetBrains Mono — structural voice, labels & metadata
*/
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..500&family=DM+Sans:ital,opsz,wght@0,9..40,300..600;1,9..40,300..500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- COLOR ---------- */
  /* Backgrounds — a purple-tinted dark. Not blue-black, not brown-black. */
  --bg:           #0e0b10;  /* deep purple-black — the void everything rests in */
  --bg-deep:      #08060a;  /* deepest layer, for sediment/depth */
  --surface:      #17131b;  /* cards, panels — purple-gray, one step up */
  --surface-2:    #211a27;  /* raised surface / hover floor */
  --line:         #2c2433;  /* hairline borders — never shadows */
  --line-strong:  #3d3346;  /* emphasized divider */

  /* Text — warm off-white with a lavender cast. Never pure white. */
  --fg1:          #ece6f0;  /* primary text — warm off-white, lavender cast */
  --fg2:          #b3a7be;  /* secondary — muted lavender-gray */
  --fg3:          #7c7186;  /* tertiary — metadata, captions, mono labels */
  --fg-faint:     #4e4557;  /* faintest — disabled, deep-background text */

  /* Candlelight — THE PRIMARY ACCENT. The voice in the room.
     Warm light against cool dark: the accent that separates from the twilight ground.
     Purple + gold is ancient and intentional. Keep it candlelight, never jewelry:
     desaturated, matte, on lines / text / the mark / small elements — never large fills,
     never a metallic gradient. */
  --gold:        #d8bd84;  /* candlelight — primary accent, the voice */
  --gold-bright: #ecd6a6;  /* active / hover / lit */
  --gold-dim:    #9a865e;  /* receded / metadata / quiet rule */
  --gold-glow:   rgba(216, 189, 132, 0.13); /* layered depth wash */
  --gold-veil:   rgba(216, 189, 132, 0.06); /* faintest sediment */

  /* Orchid — the LIVING colour. Not decoration: it belongs to the entities.
     Reserved for entity life-states (awake / present / at rest) and the two
     party-forms in the mark. Lives in one place so it can be retuned in one line. */
  --orchid:        #c98fc9;  /* the parties / the living signal */
  --orchid-bright: #d6a4d6;  /* awake / present */
  --orchid-dim:    #8a6390;  /* at rest / receded */
  --orchid-glow:   rgba(184, 125, 184, 0.14); /* low-opacity wash */
  --orchid-veil:   rgba(184, 125, 184, 0.07); /* faintest sediment layer */

  /* Ember / copper — the family thread to Glitchlit. Barely there. */
  --copper:        #c45d2c;  /* the quiet signature, one touch per page */
  --copper-dim:    rgba(196, 93, 44, 0.45);

  /* Semantic — NO red/green.
     Primary action / emphasis = candlelight. Entity status = orchid spectrum. */
  --accent:          var(--gold);          /* primary actions, links, the mark seam */
  --status-active:   var(--orchid-bright); /* brighter = present, awake, on */
  --status-resting:  var(--orchid-dim);    /* dimmer = inactive, at rest */
  --status-attention:var(--copper);        /* the only non-orchid signal, used rarely */

  /* Focus ring — visible, accessible, on-brand */
  --focus: #ecd6a6;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  /* Generous. Display leans light-weight and large. Body is calm, readable. */
  --t-hero:    clamp(3.5rem, 8vw, 7rem);    /* 56 → 112px — the front door */
  --t-display: clamp(2.5rem, 5vw, 4rem);    /* 40 → 64px — section openers */
  --t-h1:      clamp(2rem, 3.5vw, 2.75rem); /* 32 → 44px */
  --t-h2:      clamp(1.5rem, 2.5vw, 2rem);  /* 24 → 32px */
  --t-h3:      1.375rem;                     /* 22px */
  --t-lead:    1.3125rem;                    /* 21px — pull quotes, lead paragraphs */
  --t-body:    1.0625rem;                    /* 17px — base reading size */
  --t-small:   0.9375rem;                    /* 15px */
  --t-label:   0.75rem;                      /* 12px — mono labels, metadata */

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-body:   1.65;   /* generous — breathing room in prose */

  --tracking-label: 0.16em;  /* mono labels are spaced wide */
  --tracking-tight: -0.01em; /* large display tightens slightly */

  /* ---------- SPACE BETWEEN ---------- */
  /* The gap IS the brand. Spacing is generous, on an expanding scale. */
  --s-1: 0.5rem;   /* 8 */
  --s-2: 0.75rem;  /* 12 */
  --s-3: 1rem;     /* 16 */
  --s-4: 1.5rem;   /* 24 */
  --s-5: 2.5rem;   /* 40 */
  --s-6: 4rem;     /* 64 */
  --s-7: 6rem;     /* 96 */
  --s-8: 9rem;     /* 144 — room someone made before you arrived */

  /* ---------- FORM ---------- */
  --radius: 0;          /* sharp edges, intentional. No border radius anywhere. */
  --border: 1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);

  /* ---------- MOTION ---------- */
  /* Slow. Deliberate. Nothing bounces. Like breathing, not clicking. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* gentle, no overshoot */
  --t-fast:  280ms;
  --t-slow:  640ms;
  --t-fog:   1200ms;  /* entrances — appearing out of fog */
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
.ayni-type-h1, .ayni-type-display, .ayni-type-hero {
  font-family: var(--font-display);
  font-weight: 350;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg1);
}
.ayni-type-hero    { font-size: var(--t-hero); }
.ayni-type-display { font-size: var(--t-display); }
.ayni-type-h1      { font-size: var(--t-h1); }
.ayni-type-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
.ayni-type-lead {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--t-lead);
  line-height: var(--lh-snug);
  color: var(--fg2);
}
.ayni-type-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg2);
}
.ayni-type-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg3);
}