/* ============================================================
   LIBIDES — Color tokens
   Signature oxblood red (sampled from the logo: rgb 157,10,14)
   on a warm paper-neutral editorial base.
   ============================================================ */
:root {
  /* --- Brand red scale --- */
  --red-900: #5C0608;
  --red-800: #7A080B;
  --red-700: #9D0A0E;  /* THE brand red — logo color */
  --red-600: #B81216;
  --red-500: #D11A1F;
  --red-100: #F6DEDE;
  --red-50:  #FBEEEE;

  /* --- Ink / neutrals (warm-leaning, near-black to paper) --- */
  --ink-900: #141210;  /* primary text / near-black */
  --ink-800: #26221F;
  --ink-700: #3D3833;
  --ink-600: #5A534C;
  --ink-500: #7A726A;  /* muted text */
  --ink-400: #9C948B;
  --ink-300: #C2BBB2;  /* hairlines on paper */
  --ink-200: #DED9D1;
  --ink-100: #ECE8E1;
  --ink-50:  #F5F2EC;  /* warm paper surface */
  --paper:   #FBFAF7;  /* base page background */
  --white:   #FFFFFF;

  /* --- Semantic aliases --- */
  --text-primary:    var(--ink-900);
  --text-secondary:  var(--ink-600);
  --text-muted:      var(--ink-500);
  --text-inverse:    var(--paper);
  --text-brand:      var(--red-700);
  --text-on-brand:   #FBEEEE;

  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-sunken:  var(--ink-50);
  --surface-inverse: var(--ink-900);
  --surface-brand:   var(--red-700);

  --border-subtle:   var(--ink-200);
  --border-default:  var(--ink-300);
  --border-strong:   var(--ink-900);
  --border-brand:    var(--red-700);

  --accent:          var(--red-700);
  --accent-hover:    var(--red-800);
  --accent-press:    var(--red-900);

  /* --- Focus ring --- */
  --focus-ring: var(--red-500);

  /* --- Feedback (used sparingly; brand red owns "danger") --- */
  --success: #2F6B3E;
  --warning: #9A6B12;
  --danger:  var(--red-700);
}

/* ============================================================
   LIBIDES — Typography tokens
   Display: Newsreader (editorial modern serif)
   Grotesk: Space Grotesk (UI, body, labels)
   Mono:    Space Mono (technical captions, indices, dims)
   ============================================================ */
:root {
  /* --- Families --- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-grotesk: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* semantic */
  --font-body:    var(--font-grotesk);
  --font-heading: var(--font-display);
  --font-label:   var(--font-mono);

  /* --- Weights --- */
  --fw-light: 300;     /* @kind font */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */

  /* --- Fluid display scale (editorial, generous) --- */
  --fs-display-1: clamp(3.5rem, 8vw, 7rem);     /* @kind font */
  --fs-display-2: clamp(2.75rem, 5.5vw, 4.5rem); /* @kind font */
  --fs-h1: clamp(2.25rem, 4vw, 3.25rem);  /* @kind font */
  --fs-h2: clamp(1.75rem, 3vw, 2.25rem);  /* @kind font */
  --fs-h3: 1.5rem;   /* @kind font */
  --fs-h4: 1.25rem;  /* @kind font */

  /* --- Text scale --- */
  --fs-lead: 1.375rem;   /* @kind font */
  --fs-body: 1.0625rem;  /* @kind font */
  --fs-sm: 0.9375rem;    /* @kind font */
  --fs-xs: 0.8125rem;    /* @kind font */

  /* --- Label / mono scale (uppercase eyebrows, indices) --- */
  --fs-label: 0.75rem;      /* @kind font */
  --fs-label-sm: 0.6875rem; /* @kind font */

  /* --- Line heights --- */
  --lh-tight: 1.02;   /* @kind font */
  --lh-snug: 1.12;    /* @kind font */
  --lh-heading: 1.18; /* @kind font */
  --lh-body: 1.6;     /* @kind font */
  --lh-relaxed: 1.75; /* @kind font */

  /* --- Letter spacing --- */
  --ls-display: -0.02em;  /* @kind font */
  --ls-tight: -0.01em;    /* @kind font */
  --ls-normal: 0;         /* @kind font */
  --ls-label: 0.16em;     /* @kind font */
  --ls-label-wide: 0.24em; /* @kind font */
}

/* ============================================================
   LIBIDES — Spacing & layout tokens
   8px base rhythm with an editorial column system.
   ============================================================ */
:root {
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */
  --space-11: 12rem;    /* 192 — section breathing */

  /* --- Layout --- */
  --container-max: 1440px;    /* @kind spacing */
  --container-text: 68ch;     /* @kind spacing */
  --gutter: clamp(1.25rem, 5vw, 5rem);  /* @kind spacing */
  --section-y: clamp(4rem, 12vh, 11rem); /* @kind spacing */

  /* editorial grid */
  --grid-cols: 12;   /* @kind other */
  --grid-gap: clamp(1rem, 2vw, 2rem);  /* @kind spacing */
}

/* ============================================================
   LIBIDES — Effects: radii, borders, shadows, motion
   Editorial-architectural: mostly sharp corners, hairline
   borders, restrained shadows. Crisp, not soft.
   ============================================================ */
:root {
  /* --- Radii (kept minimal — architecture is square) --- */
  --radius-0: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* --- Border widths --- */
  --border-hair: 1px;
  --border-thick: 2px;
  --border-rule: 3px;   /* editorial section rules */

  /* --- Shadows (soft, low, warm-neutral — used sparingly) --- */
  --shadow-xs: 0 1px 2px rgba(20, 18, 16, 0.06);
  --shadow-sm: 0 2px 8px rgba(20, 18, 16, 0.07);
  --shadow-md: 0 8px 24px rgba(20, 18, 16, 0.10);
  --shadow-lg: 0 24px 60px rgba(20, 18, 16, 0.14);
  --shadow-focus: 0 0 0 3px rgba(209, 26, 31, 0.30);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast: 140ms;  /* @kind other */
  --dur-base: 240ms;  /* @kind other */
  --dur-slow: 520ms;  /* @kind other */

  /* --- Z layers --- */
  --z-base: 1;        /* @kind other */
  --z-sticky: 100;    /* @kind other */
  --z-overlay: 800;   /* @kind other */
  --z-modal: 900;     /* @kind other */
  --z-toast: 1000;    /* @kind other */
}


/* LIBIDES base */
html,body{margin:0;background:var(--surface-page);color:var(--text-primary);}
*{box-sizing:border-box;}
body{font-family:var(--font-grotesk);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
img{max-width:100%;height:auto;}
::selection{background:var(--red-700);color:var(--red-50);}