/* =====================================================================
   ASTREI MEDIA — Design System Foundation
   colors_and_type.css
   Drop this file into any project. Import it first, before everything.
   ===================================================================== */

/* ── GOOGLE FONTS ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Syne:wght@400;500;600;700;800&display=swap');

/* ── LOCAL FONTS (fallback when bundling) ─────────────────────────── */
/*
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/CormorantGaramond-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/CormorantGaramond-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/CormorantGaramond-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('assets/fonts/Syne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('assets/fonts/Syne-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

/* ── DESIGN TOKENS ────────────────────────────────────────────────── */
:root {

  /* Foundation — backgrounds */
  --color-bg:             #09070F;
  --color-surface:        #120D1E;
  --color-surface-raised: #1A1230;
  --color-border:         rgba(139, 92, 246, 0.18);
  --color-hairline:       rgba(245, 240, 255, 0.07);

  /* Primary — Viola elettrico */
  --color-primary:        #8B5CF6;
  --color-primary-hover:  #A78BFA;
  --color-primary-pressed:#7C3AED;
  --color-primary-subtle: rgba(139, 92, 246, 0.12);
  --color-primary-glow:   rgba(139, 92, 246, 0.35);

  /* Secondary — Oro caldo */
  --color-secondary:        #F59E0B;
  --color-secondary-hover:  #FBBF24;
  --color-secondary-pressed:#D97706;
  --color-secondary-subtle: rgba(245, 158, 11, 0.10);

  /* Text — tre livelli */
  --color-text-primary:   #F5F0FF;
  --color-text-secondary: #B8A9D4;
  --color-text-tertiary:  #6B5E8A;

  /* Utility */
  --color-card-bg:   rgba(18, 13, 30, 0.80);
  --color-input-bg:  rgba(26, 18, 48, 0.60);
  --color-overlay:   rgba(9, 7, 15, 0.75);

  /* Glow & shadow */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md:    0 4px 24px rgba(0, 0, 0, 0.55);
  --shadow-lg:    0 8px 48px rgba(0, 0, 0, 0.65);
  --glow-primary: 0 0 20px rgba(139, 92, 246, 0.30), 0 0 60px rgba(139, 92, 246, 0.12);
  --glow-gold:    0 0 20px rgba(245, 158, 11, 0.28), 0 0 48px rgba(245, 158, 11, 0.08);
  --glow-text:    0 0 32px rgba(139, 92, 246, 0.50);

  /* Gradients */
  --gradient-signature:  linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
  --gradient-gold:       linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  --gradient-atmosphere: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(139, 92, 246, 0.22) 0%, transparent 70%);
  --gradient-section:    linear-gradient(180deg, rgba(139, 92, 246, 0.06) 0%, transparent 100%);
  --gradient-border:     linear-gradient(135deg, rgba(139, 92, 246, 0.50) 0%, rgba(245, 158, 11, 0.25) 100%);
  --gradient-manifesto:  linear-gradient(180deg, #F5F0FF 0%, rgba(245, 240, 255, 0.75) 100%);

  /* Radii */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-pill: 9999px;

  /* Spacing (base 4px) */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-30:  7.5rem;

  /* Layout */
  --content-max: 75rem;   /* 1200px a radice 16, 1800px a radice 24 */
  --prose-max:    45rem;  /* la riga resta sulle stesse battute */
  --content-pad:  clamp(1.5rem, 5vw, 5rem);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-out: cubic-bezier(0.40, 0, 0.20, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
  --dur-enter:   600ms;

  /* Font stacks */
  --font-display: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-italic:  'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Syne', 'system-ui', 'Helvetica Neue', sans-serif;
}

/* ── LIGHT MODE TOKENS ────────────────────────────────────────────── */
[data-theme="light"] {
  --color-bg:             #FAFAF8;
  --color-surface:        #F2EFF9;
  --color-surface-raised: #E8E2F5;
  --color-border:         rgba(124, 58, 237, 0.18);
  --color-hairline:       rgba(26, 15, 46, 0.08);

  --color-primary:        #7C3AED;
  --color-primary-hover:  #6D28D9;
  --color-primary-pressed:#5B21B6;
  --color-primary-subtle: rgba(124, 58, 237, 0.08);

  --color-secondary:        #D97706;
  --color-secondary-hover:  #B45309;
  --color-secondary-pressed:#92400E;

  --color-text-primary:   #1A0F2E;
  --color-text-secondary: #4A3870;
  --color-text-tertiary:  #8B7DAA;

  --color-card-bg:  rgba(242, 239, 249, 0.90);
  --color-input-bg: rgba(232, 226, 245, 0.70);
  --color-overlay:  rgba(250, 250, 248, 0.80);

  --shadow-sm: 0 2px 8px rgba(26, 15, 46, 0.10);
  --shadow-md: 0 4px 24px rgba(26, 15, 46, 0.14);
  --shadow-lg: 0 8px 48px rgba(26, 15, 46, 0.18);

  --glow-primary: 0 0 20px rgba(124, 58, 237, 0.18), 0 0 48px rgba(124, 58, 237, 0.06);

  --gradient-atmosphere: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 58, 237, 0.10) 0%, transparent 70%);
  --gradient-manifesto:  linear-gradient(180deg, #1A0F2E 0%, rgba(26, 15, 46, 0.75) 100%);
}

/* ── BASE ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* La radice cresce con la larghezza della finestra.
   Sotto i 1440px resta a 16px, quindi portatili e telefoni non cambiano.
   A 2560px arriva a 24px, che è il 150% a cui il sito si legge bene su
   uno schermo grande. Oltre si ferma a 26px: a un certo punto ingrandire
   non aiuta più a leggere, allarga e basta.
   Tutta la scala (testo, spazi, colonna, raggi) è in rem e segue da sola.
   È il motivo per cui in questi tre file non ci sono quasi più px. */
html {
  font-size: clamp(16px, 0.7143vw + 5.714px, 26px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--gradient-atmosphere);
  pointer-events: none;
  z-index: 0;
}

::selection {
  background: var(--color-primary-subtle);
  color: var(--color-text-primary);
}

/* ── TYPOGRAPHY ───────────────────────────────────────────────────── */

/* Display — manifesto */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3.5rem, 10vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0;
}

h1.bold, .h1.bold {
  font-weight: 700;
}

h1.italic, .h1.italic {
  font-style: italic;
  font-weight: 300;
}

/* Section heading */
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.00;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0;
}

/* Sub-section */
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.5vw, 2.75rem);
  line-height: 1.10;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: 0;
}

/* Accent italic — citazioni, pull quote, enfasi */
.italic-accent, blockquote {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  line-height: 1.30;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  border-left: 2px solid var(--color-primary);
  padding-left: var(--space-6);
  margin: 0;
}

/* Body */
p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.1vw, 1.125rem);
  line-height: 1.72;
  color: var(--color-text-primary);
  margin: 0;
}

/* Card body — leggermente più piccolo */
.body-card {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* Label / tag */
.label, .tag-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1.20;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* Caption */
.caption, .micro {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.50;
  color: var(--color-text-tertiary);
}

/* Firma — email e documenti */
.firma-nome {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.20;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.firma-ruolo {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.6875rem;
  line-height: 1.40;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Code */
code, pre {
  font-family: 'JetBrains Mono', 'Fira Code', 'Menlo', monospace;
  font-size: 0.875em;
  background: var(--color-primary-subtle);
  color: var(--color-primary-hover);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
}

/* Links */
a {
  color: var(--color-primary-hover);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

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

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}