/* Panamera — tokens do Design System (concatenados) */

/* fonts.css */
/* Panamera brand typeface — Host Grotesk (Google Fonts).
   Declared in the brand manual §3.1 as the sole family:
   titles in bold/medium, body in regular/light. */
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');


/* colors.css */
/* ── Panamera · Colors ──────────────────────────────────────────────
   Source: Manual de Marca §2.1. Three brand colors + a neutral scale.
   The bronze is a specialty color: used ONLY for identity-grid lines
   sitting on a gray field, to soften the contrast (manual p.20). */
:root {
  /* Brand — base values (with Pantone / print references) */
  --charcoal: #252A2D;   /* Pantone 433C · primary dark  · CMYK 75/65/60/65 */
  --gold:     #A18457;   /* Pantone 465C · primary accent · CMYK 30/40/70/15 */
  --bronze:   #605033;   /* Pantone 462C · lines-on-gray  · CMYK 50/55/80/40 */

  /* Gold tint/shade ramp (for hovers, borders, washes) */
  --gold-700: #7C6540;
  --gold-600: #8E7349;
  --gold-500: #A18457;   /* = --gold */
  --gold-400: #B79C71;
  --gold-300: #CDB794;
  --gold-200: #E2D5BE;
  --gold-100: #F1EADD;
  --gold-050: #F9F5EE;

  /* Charcoal ramp (surfaces, borders, elevation on dark) */
  --charcoal-900: #14181A;
  --charcoal-800: #1B1F21;
  --charcoal-700: #252A2D;  /* = --charcoal */
  --charcoal-600: #333A3E;
  --charcoal-500: #454E53;

  /* Neutrals — warm-tinted grays to sit with the gold */
  --white:      #FFFFFF;
  --paper:      #F7F6F3;   /* off-white page field */
  --mist:       #EDECE8;   /* light gray field (grid-on-gray context) */
  --stone-200:  #DAD8D2;
  --stone-300:  #C3C0B8;
  --stone-400:  #9B978D;
  --stone-500:  #6F6C63;

  /* ── Semantic aliases ─────────────────────────────────────────── */
  --bg-page:          var(--paper);
  --bg-page-dark:     var(--charcoal-700);
  --bg-field-gray:    var(--mist);
  --surface-card:     var(--white);
  --surface-card-dark:var(--charcoal-600);
  --surface-raised:   var(--white);

  --text-primary:     var(--charcoal-700);
  --text-secondary:   var(--stone-500);
  --text-muted:       var(--stone-400);
  --text-on-dark:     var(--white);
  --text-on-dark-dim: var(--stone-300);
  --text-accent:      var(--gold-600);

  --line-hairline:    var(--stone-200);
  --line-strong:      var(--charcoal-700);
  --line-accent:      var(--gold-500);
  --line-on-gray:     var(--bronze);   /* grid lines when field is gray */

  --accent:           var(--gold-500);
  --accent-hover:     var(--gold-600);
  --accent-active:    var(--gold-700);
  --accent-contrast:  var(--charcoal-700); /* text on a gold fill */

  --focus-ring:       var(--gold-500);
}


/* typography.css */
/* ── Panamera · Typography ──────────────────────────────────────────
   One family, Host Grotesk. Titles bold/medium, body regular/light.
   The wordmark's ultra-tracked thin caps are a LOGO treatment — for
   editorial display headings use --tracking-wide on light weights. */
:root {
  --font-sans: 'Host Grotesk', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);

  /* 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 */

  /* Type scale (rem, 16px root) — display → caption */
  --fs-display: 4.5rem;   /* 72 */
  --fs-h1: 3rem;          /* 48 */
  --fs-h2: 2.25rem;       /* 36 */
  --fs-h3: 1.5rem;        /* 24 */
  --fs-h4: 1.25rem;       /* 20 */
  --fs-body-lg: 1.125rem; /* 18 */
  --fs-body: 1rem;        /* 16 */
  --fs-body-sm: 0.875rem; /* 14 */
  --fs-caption: 0.75rem;  /* 12 */
  --fs-overline: 0.6875rem;/* 11 */

  /* Line heights */
  --lh-tight: 1.05;    /* @kind other */
  --lh-snug: 1.2;      /* @kind other */
  --lh-normal: 1.5;    /* @kind other */
  --lh-relaxed: 1.7;   /* @kind other */

  /* Letter-spacing — the brand leans on generous tracking for caps */
  --tracking-tight: -0.02em;  /* @kind other */
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;   /* overlines / eyebrow labels */
  --tracking-widest: 0.32em;  /* logo-echo display caps */
}


/* spacing.css */
/* ── Panamera · Spacing ─────────────────────────────────────────────
   4px base rhythm. The brand's layouts are airy and gridded — the
   clearspace around the mark equals the symbol width (manual §1.8). */
: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 */

  /* Layout */
  --container-max: 1280px;
  --gutter: var(--space-6);
  --section-y: var(--space-9);
}


/* effects.css */
/* ── Panamera · Effects ─────────────────────────────────────────────
   Architectural & restrained: sharp/near-sharp corners, hairline
   borders, soft low shadows. No glossy or colored glows. */
:root {
  /* Radii — the identity is orthogonal; corners stay tight */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Borders */
  --border-hairline: 1px solid var(--line-hairline);
  --border-strong: 1px solid var(--line-strong);
  --border-accent: 1px solid var(--line-accent);
  --border-w-hair: 1px;   /* @kind other */
  --border-w-rule: 2px;   /* identity grid lines read ~2px @kind other */

  /* Shadows — low, neutral, architectural */
  --shadow-sm: 0 1px 2px rgba(20, 24, 26, 0.06);
  --shadow-md: 0 6px 20px rgba(20, 24, 26, 0.08);
  --shadow-lg: 0 18px 48px rgba(20, 24, 26, 0.12);
  --shadow-dark: 0 20px 60px rgba(0, 0, 0, 0.45);

  /* Motion — quiet, precise, no bounce */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);           /* @kind other */
  --dur-fast: 140ms;   /* @kind other */
  --dur-base: 240ms;   /* @kind other */
  --dur-slow: 480ms;   /* @kind other */

  /* Focus */
  --focus-ring-w: 2px;      /* @kind other */
  --focus-ring-offset: 2px; /* @kind other */
}