/* ============================================================
   GignuxNote — Design Tokens
   "Appunti e analisi su tecnologia, AI e business"
   Aesthetic: minimale tecnologico — newsprint + terminal
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&family=Roboto+Slab:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- COLOR — Core ink & paper ---------- */
  --gn-ink:        #0B0B0B;   /* near-black, all body text */
  --gn-ink-2:      #1A1916;   /* deep ink, headlines */
  --gn-paper:      #F5F2EA;   /* warm newsprint, the signature surface */
  --gn-paper-2:    #ECE7DA;   /* subtle chip / quote background */
  --gn-paper-3:    #E2DCCC;   /* divider tint */
  --gn-white:      #FFFFFF;   /* pure white — cards-on-paper */

  /* ---------- COLOR — Neutrals (foreground ramp) ---------- */
  --gn-fg-1:       #0B0B0B;   /* primary text */
  --gn-fg-2:       #3A3833;   /* secondary text */
  --gn-fg-3:       #6B6961;   /* meta, captions, byline */
  --gn-fg-4:       #9C998E;   /* disabled, placeholder */
  --gn-fg-5:       #C4C0B3;   /* hairline accent on text */

  /* ---------- COLOR — Signal (one accent, used sparingly) ---------- */
  --gn-signal:        #E5301B;   /* editorial red — links, tags, CTA */
  --gn-signal-ink:    #B11E0C;   /* hover/pressed */
  --gn-signal-tint:   #FBDCD6;   /* selection, soft chip */

  /* ---------- COLOR — Semantic categories (tag colors, used minimally) ---------- */
  --gn-cat-ai:        #E5301B;
  --gn-cat-business:  #0B0B0B;
  --gn-cat-tech:      #1E5BD8;
  --gn-cat-design:    #6F2BB9;
  --gn-cat-books:     #1F6E3A;
  --gn-cat-self:      #B5731A;

  /* ---------- COLOR — Surfaces ---------- */
  --gn-bg:           var(--gn-paper);
  --gn-surface:      var(--gn-white);
  --gn-surface-alt:  var(--gn-paper-2);
  --gn-border:       #1F1D17;          /* hairline, structural */
  --gn-border-soft:  rgba(11,11,11,.12);
  --gn-overlay:      rgba(11,11,11,.65);

  /* ---------- COLOR — Dark companion (terminal mode) ---------- */
  --gn-dark-bg:      #0B0B0B;
  --gn-dark-surface: #16140F;
  --gn-dark-fg-1:    #F5F2EA;
  --gn-dark-fg-2:    #B8B3A4;
  --gn-dark-border:  #2A2720;

  /* ---------- TYPE — Families ---------- */
  --gn-font-display: "Roboto", "Helvetica Neue", system-ui, sans-serif;
  --gn-font-sans:    "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gn-font-serif:   "Roboto Slab", Georgia, "Times New Roman", serif;
  --gn-font-mono:    "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE — Base scale (modular, ratio 1.250) ---------- */
  --gn-fs-xs:    11px;
  --gn-fs-sm:    13px;
  --gn-fs-base:  16px;
  --gn-fs-md:    18px;
  --gn-fs-lg:    22px;
  --gn-fs-xl:    28px;
  --gn-fs-2xl:   36px;
  --gn-fs-3xl:   48px;
  --gn-fs-4xl:   64px;
  --gn-fs-5xl:   88px;
  --gn-fs-6xl:   120px;

  /* ---------- TYPE — Line heights ---------- */
  --gn-lh-tight:  1.04;
  --gn-lh-snug:   1.18;
  --gn-lh-normal: 1.45;
  --gn-lh-prose:  1.62;
  --gn-lh-loose:  1.8;

  /* ---------- TYPE — Letter spacing ---------- */
  --gn-ls-tight:    -0.02em;
  --gn-ls-display:  -0.025em;
  --gn-ls-normal:   0;
  --gn-ls-wide:     0.04em;
  --gn-ls-mono:     0.02em;
  --gn-ls-caps:     0.12em;     /* used for the ALL-CAPS labels (eyebrow / tag) */

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

  /* ---------- LAYOUT ---------- */
  --gn-container:        1240px;
  --gn-container-prose:  720px;
  --gn-gutter:           24px;

  /* ---------- RADIUS — minimal, mostly square ---------- */
  --gn-r-0:    0px;
  --gn-r-xs:   2px;
  --gn-r-sm:   4px;
  --gn-r-md:   6px;
  --gn-r-pill: 999px;

  /* ---------- BORDERS / RULES ---------- */
  --gn-rule-hair:   1px solid var(--gn-border);
  --gn-rule-soft:   1px solid var(--gn-border-soft);
  --gn-rule-bold:   2px solid var(--gn-ink);

  /* ---------- SHADOWS — restrained, only on lifted cards ---------- */
  --gn-shadow-0: none;
  --gn-shadow-1: 0 1px 0 0 var(--gn-border-soft);
  --gn-shadow-2: 0 2px 0 0 var(--gn-ink);                              /* offset block, no blur */
  --gn-shadow-3: 0 4px 0 0 var(--gn-ink);
  --gn-shadow-4: 0 12px 32px -16px rgba(11,11,11,.22);                 /* soft lift, sparingly */

  /* ---------- MOTION ---------- */
  --gn-ease:        cubic-bezier(.2, .7, .2, 1);
  --gn-ease-out:    cubic-bezier(0, 0, .2, 1);
  --gn-dur-instant: 80ms;
  --gn-dur-fast:    140ms;
  --gn-dur-base:    220ms;
  --gn-dur-slow:    420ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */

.gn-display-xxl,
h1.gn-hero {
  font-family: var(--gn-font-display);
  font-weight: 900;
  font-size: clamp(56px, 9vw, var(--gn-fs-6xl));
  line-height: var(--gn-lh-tight);
  letter-spacing: var(--gn-ls-display);
  color: var(--gn-ink-2);
}

.gn-h1, h1 {
  font-family: var(--gn-font-display);
  font-weight: 900;
  font-size: clamp(36px, 5vw, var(--gn-fs-4xl));
  line-height: var(--gn-lh-tight);
  letter-spacing: var(--gn-ls-display);
  color: var(--gn-ink-2);
}

.gn-h2, h2 {
  font-family: var(--gn-font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, var(--gn-fs-3xl));
  line-height: var(--gn-lh-snug);
  letter-spacing: var(--gn-ls-display);
  color: var(--gn-ink-2);
}

.gn-h3, h3 {
  font-family: var(--gn-font-display);
  font-weight: 700;
  font-size: var(--gn-fs-xl);
  line-height: var(--gn-lh-snug);
  letter-spacing: var(--gn-ls-tight);
  color: var(--gn-ink-2);
}

.gn-h4, h4 {
  font-family: var(--gn-font-sans);
  font-weight: 600;
  font-size: var(--gn-fs-lg);
  line-height: var(--gn-lh-snug);
  color: var(--gn-ink-2);
}

.gn-h5, h5 {
  font-family: var(--gn-font-sans);
  font-weight: 600;
  font-size: var(--gn-fs-md);
  line-height: var(--gn-lh-normal);
  color: var(--gn-ink-2);
}

.gn-lede {
  font-family: var(--gn-font-serif);
  font-weight: 400;
  font-size: var(--gn-fs-lg);
  line-height: var(--gn-lh-prose);
  color: var(--gn-fg-2);
}

.gn-prose, p {
  font-family: var(--gn-font-serif);
  font-weight: 400;
  font-size: var(--gn-fs-md);
  line-height: var(--gn-lh-prose);
  color: var(--gn-fg-1);
}

.gn-body, .gn-ui {
  font-family: var(--gn-font-sans);
  font-weight: 400;
  font-size: var(--gn-fs-base);
  line-height: var(--gn-lh-normal);
  color: var(--gn-fg-1);
}

.gn-meta, .gn-byline {
  font-family: var(--gn-font-sans);
  font-weight: 500;
  font-size: var(--gn-fs-sm);
  line-height: var(--gn-lh-normal);
  color: var(--gn-fg-3);
}

.gn-eyebrow,
.gn-tag,
.gn-label {
  font-family: var(--gn-font-mono);
  font-weight: 500;
  font-size: var(--gn-fs-xs);
  letter-spacing: var(--gn-ls-caps);
  text-transform: uppercase;
  color: var(--gn-ink);
}

.gn-mono, code, kbd, pre {
  font-family: var(--gn-font-mono);
  font-size: 0.92em;
  letter-spacing: var(--gn-ls-mono);
}

code {
  background: var(--gn-paper-2);
  padding: 2px 6px;
  border-radius: var(--gn-r-xs);
}

/* ============================================================
   PRIMITIVES — links, rules, focus
   ============================================================ */

a, .gn-link {
  color: var(--gn-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--gn-fg-4);
  transition: color var(--gn-dur-fast) var(--gn-ease),
              text-decoration-color var(--gn-dur-fast) var(--gn-ease);
}
a:hover, .gn-link:hover {
  color: var(--gn-signal);
  text-decoration-color: var(--gn-signal);
}

hr, .gn-rule {
  border: 0;
  border-top: var(--gn-rule-hair);
  margin: var(--gn-s-8) 0;
}

:focus-visible {
  outline: 2px solid var(--gn-signal);
  outline-offset: 2px;
  border-radius: var(--gn-r-xs);
}

/* ============================================================
   DARK MODE — terminal companion
   ============================================================ */

[data-theme="dark"] {
  --gn-bg:          var(--gn-dark-bg);
  --gn-surface:     var(--gn-dark-surface);
  --gn-surface-alt: #1E1B14;
  --gn-fg-1:        var(--gn-dark-fg-1);
  --gn-fg-2:        var(--gn-dark-fg-2);
  --gn-fg-3:        #8C887A;
  --gn-ink:         var(--gn-dark-fg-1);
  --gn-ink-2:       #FFFFFF;
  --gn-border:      var(--gn-dark-border);
  --gn-border-soft: rgba(245,242,234,.14);
  --gn-paper-2:     #1E1B14;
}