/* ============================================================
   VITTALURE — Colors & Type
   Foundational + semantic tokens.
   Source of truth: presence-alchemy-lab/src/index.css (HSL tokens)
   Brand: Steel Blue accent · Champagne off-white · Graphite ink
   Fonts: Playfair Display (display) · DM Sans (body/UI)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- RAW PALETTE (hex) ---------- */
  --champagne:        #F5F2EC; /* warm off-white — page background */
  --champagne-card:   #FAF8F4; /* lifted surface (cards, popovers) */
  --champagne-muted:  #EDE9E1; /* muted warm fill */
  --graphite:         #2C2C2A; /* Grafite — primary ink, wordmark, weighted elements */
  --cinza-medio:      #888780; /* Cinza Médio — taglines, secondary text, captions (brand-named) */
  --graphite-soft:    #5C5B57; /* darkened secondary for long body copy (AA contrast on champagne) */

  --steel:            #7D9AB3; /* PRIMARY ACCENT — Steel Blue Vittalure */
  --steel-light:      #9AAFC2; /* Steel Blue Claro — on dark / secondary highlights */
  --steel-deep:       #5E7E99; /* gradient end / pressed steel */
  --slate-mid:        #B7C6D4; /* Slate Médio — section fills, dividers, cards */
  --slate-light:      #CAD5DF; /* Slate Claro — soft fills, illustrations, icon wells */

  --border:           #E4DED3; /* hairline border (warm) */
  --destructive:      #BE3A3A; /* error red */

  /* ---------- RAW PALETTE (HSL — matches Tailwind tokens) ---------- */
  --background: 41 26% 94%;          /* @kind color */
  --foreground: 60 4% 17%;           /* @kind color */
  --card: 41 30% 97%;                /* @kind color */
  --card-foreground: 60 4% 17%;      /* @kind color */
  --popover: 41 30% 97%;             /* @kind color */
  --popover-foreground: 60 4% 17%;   /* @kind color */
  --primary: 60 4% 17%;              /* @kind color */
  --primary-foreground: 41 26% 94%;  /* @kind color */
  --secondary: 211 25% 83%;          /* @kind color */
  --secondary-foreground: 60 4% 17%; /* @kind color */
  --muted: 41 22% 90%;               /* @kind color */
  --muted-foreground: 53 4% 38%;     /* @kind color */
  --accent: 208 26% 60%;             /* @kind color */
  --accent-foreground: 0 0% 100%;    /* @kind color */
  --gold: 208 26% 60%;               /* @kind color */
  --gold-foreground: 0 0% 100%;      /* @kind color */
  --rose: 210 25% 78%;               /* @kind color */
  --champagne-hsl: 41 26% 94%;       /* @kind color */
  --nude: 211 25% 83%;               /* @kind color */
  --steel-hsl: 208 26% 60%;          /* @kind color */
  --steel-light-hsl: 208 25% 68%;    /* @kind color */
  --destructive-hsl: 0 65% 45%;      /* @kind color */
  --ring: 208 26% 60%;               /* @kind color */

  /* ---------- SEMANTIC COLOR ROLES ---------- */
  --bg:            var(--champagne);
  --surface:       var(--champagne-card);
  --surface-muted: var(--champagne-muted);
  --fg1:           var(--graphite);       /* headings, primary text */
  --fg2:           var(--graphite-soft);  /* long body copy (kept dark for readability) */
  --fg3:           var(--cinza-medio);    /* Cinza Médio — taglines / captions / secondary */
  --accent-fg:     var(--steel);          /* eyebrows, links, active icon */
  --on-accent:     #FFFFFF;
  --line:          var(--border);

  /* ---------- GRADIENTS ---------- */
  --gradient-hero: linear-gradient(135deg, hsl(41 30% 96%) 0%, hsl(211 25% 88%) 60%, hsl(208 26% 75%) 100%); /* @kind color */
  --gradient-gold: linear-gradient(135deg, hsl(207 27% 69%) 0%, hsl(208 30% 50%) 100%); /* @kind color */
  --gradient-soft: linear-gradient(180deg, hsl(41 26% 94%) 0%, hsl(211 22% 90%) 100%); /* @kind color */

  /* ---------- ELEVATION ---------- */
  --shadow-soft:    0 4px 30px -10px hsl(208 30% 25% / 0.08);
  --shadow-elegant: 0 30px 80px -30px hsl(208 35% 25% / 0.22);
  --shadow-gold:    0 10px 40px -15px hsl(208 30% 45% / 0.35);

  /* ---------- RADII ---------- */
  --radius: 1rem;          /* 16px — base (lg) */
  --radius-sm: 0.5rem;     /* 8px  */
  --radius-md: 0.75rem;    /* 12px */
  --radius-lg: 1rem;       /* 16px */
  --radius-xl: 1.5rem;     /* 24px — image cards */
  --radius-2xl: 2rem;      /* 32px — feature banners */
  --radius-pill: 9999px;   /* buttons, chips */

  /* ---------- MOTION ---------- */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-fast: 0.25s;  /* @kind other */
  --dur-base: 0.5s;   /* @kind other */
  --dur-slow: 0.9s;   /* @kind other */

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* ---------- TYPE SCALE (semantic) ---------- */
  /* Display & headings use Playfair; eyebrows/body/UI use DM Sans */
  --display-font: var(--font-display);
  --display-weight: 400;          /* @kind font */
  --display-tracking: -0.02em;
  --display-leading: 1.04;        /* @kind font */

  --eyebrow-font: var(--font-sans);
  --eyebrow-size: 0.75rem;       /* 12px */
  --eyebrow-weight: 500;         /* @kind font */
  --eyebrow-tracking: 0.4em;     /* wide uppercase eyebrow */
  --eyebrow-transform: uppercase; /* @kind font */

  --body-font: var(--font-sans);
  --body-size: 1.125rem;         /* 18px */
  --body-leading: 1.7;           /* @kind font */
  --body-weight: 400;            /* @kind font */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.vl-display-1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--fg1); text-wrap: balance; }
.vl-display-2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.25rem, 4.5vw, 3.75rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--fg1); text-wrap: balance; }
.vl-h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--fg1); }
.vl-h2 { font-family: var(--font-display); font-weight: 500; font-size: 2rem; line-height: 1.15; color: var(--fg1); }
.vl-h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.25; color: var(--fg1); }
.vl-em { font-style: italic; font-weight: 300; color: var(--steel); } /* signature italic accent inside headings */

.vl-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--steel);
}

.vl-lead { font-family: var(--font-sans); font-weight: 300; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.6; color: var(--fg2); }
.vl-body { font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.7; color: var(--fg2); }
.vl-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: 0.875rem; line-height: 1.65; color: var(--fg2); }
.vl-caption { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--fg3); }
.vl-stat { font-family: var(--font-display); font-weight: 500; font-size: 2.25rem; line-height: 1; color: var(--steel); }

/* Helpers */
.vl-bg { background: var(--bg); }
.vl-surface { background: var(--surface); }
.vl-divider { height: 1px; background: var(--line); border: 0; }