/* AlojaPro — Color & Type Foundations
 * Single source of truth for color tokens, font stacks, and semantic type roles.
 * Sourced from the Figma "IDENTIDAD MARCA ALOJAPRO" brand guidelines.
 */

/* ── Webfont ───────────────────────────────────────────────────────────────
 * Plus Jakarta Sans is self-hosted as a single variable woff2 (all weights
 * 200–800 in one ~27 KiB file, latin subset only). This eliminates the
 * Google Fonts critical chain (DNS+TLS to fonts.googleapis.com → font CSS →
 * fonts.gstatic.com → woff2) that was costing ~500ms on mobile, and lets
 * the .htaccess/nginx cache rules apply (1-year cache vs Google's short TTL).
 */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Brand colors ── (Catalan names from the Figma kept as aliases) */
  --ap-primary:    #009CD9;   /* Color primari   — brand cyan */
  --ap-secondary:  #E1F7FF;   /* Color secundari — pale cyan tint */
  --ap-accent:     #000000;   /* Color destacar elements — black for emphasis */
  --ap-bg:         #EEEEEE;   /* Color de fons   — neutral page background */
  --ap-white:      #FFFFFF;
  --ap-black:      #000000;

  /* ── Extended neutrals (derived, not in the Figma — used for UI density) */
  --ap-ink-900: #0A0A0A;
  --ap-ink-700: #2A2A2A;
  --ap-ink-500: #5A5A5A;
  --ap-ink-300: #B5B5B5;
  --ap-ink-200: #D6D6D6;
  --ap-ink-100: #EEEEEE;
  --ap-ink-50:  #F7F7F7;

  /* ── Brand-tinted cyan scale (derived from --ap-primary) */
  --ap-cyan-700: #006C97;
  --ap-cyan-600: #0085BA;
  --ap-cyan-500: #009CD9;   /* alias of primary */
  --ap-cyan-400: #41B7E3;
  --ap-cyan-300: #82CFEC;
  --ap-cyan-200: #B7E5F4;
  --ap-cyan-100: #E1F7FF;   /* alias of secondary */
  --ap-cyan-50:  #F2FBFF;

  /* ── Semantic colors (UI states) */
  --ap-success: #1F9E5A;
  --ap-warning: #F2A516;
  --ap-danger:  #D9342B;
  --ap-info:    var(--ap-primary);

  /* ── Surfaces & foreground */
  --ap-surface:           #FFFFFF;
  --ap-surface-muted:     #F7F7F7;
  --ap-surface-inverse:   #000000;
  --ap-fg-1:              #0A0A0A;   /* primary text */
  --ap-fg-2:              #5A5A5A;   /* secondary text */
  --ap-fg-3:              #8A8A8A;   /* placeholder / hint */
  --ap-fg-on-primary:     #FFFFFF;
  --ap-fg-on-dark:        #FFFFFF;
  --ap-border:            #E4E4E4;
  --ap-border-strong:     #B5B5B5;
  --ap-divider:           #EEEEEE;

  /* ── Type stack ── */
  --ap-font-display: 'Google Sans', 'Product Sans', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ap-font-body:    'Google Sans', 'Product Sans', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ap-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Type scale (Google Sans 16/15/32 confirmed; rest is harmonised) */
  --ap-fs-display: 56px;
  --ap-fs-h1:      40px;
  --ap-fs-h2:      32px;   /* matches Figma display */
  --ap-fs-h3:      24px;
  --ap-fs-h4:      20px;
  --ap-fs-body:    16px;   /* matches Figma body */
  --ap-fs-small:   15px;   /* matches Figma small */
  --ap-fs-xs:      13px;

  --ap-fw-regular: 400;
  --ap-fw-medium:  500;
  --ap-fw-bold:    700;

  --ap-lh-tight:   1.05;
  --ap-lh-snug:    1.2;
  --ap-lh-normal:  1.45;
  --ap-lh-relaxed: 1.6;

  /* ── Spacing (4px base) */
  --ap-space-1: 4px;
  --ap-space-2: 8px;
  --ap-space-3: 12px;
  --ap-space-4: 16px;
  --ap-space-5: 24px;
  --ap-space-6: 32px;
  --ap-space-7: 48px;
  --ap-space-8: 64px;
  --ap-space-9: 96px;

  /* ── Radii */
  --ap-radius-xs: 4px;
  --ap-radius-sm: 8px;
  --ap-radius-md: 12px;
  --ap-radius-lg: 20px;
  --ap-radius-pill: 999px;
  --ap-radius-circle: 50%;

  /* ── Shadows (soft, neutral — UI is mostly flat) */
  --ap-shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --ap-shadow-2: 0 4px 12px rgba(0,0,0,0.08);
  --ap-shadow-3: 0 12px 32px rgba(0,0,0,0.12);
  --ap-shadow-focus: 0 0 0 3px rgba(0,156,217,0.35);
}

/* ── Semantic element defaults ──────────────────────────────────────────── */
html, body {
  font-family: var(--ap-font-body);
  font-size: var(--ap-fs-body);
  line-height: var(--ap-lh-normal);
  color: var(--ap-fg-1);
  background: var(--ap-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--ap-font-display);
  font-weight: var(--ap-fw-bold);
  line-height: var(--ap-lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--ap-space-4);
  color: var(--ap-fg-1);
}
h1 { font-size: var(--ap-fs-h1); }
h2 { font-size: var(--ap-fs-h2); }
h3 { font-size: var(--ap-fs-h3); line-height: var(--ap-lh-snug); }
h4 { font-size: var(--ap-fs-h4); line-height: var(--ap-lh-snug); }

p  { margin: 0 0 var(--ap-space-4); line-height: var(--ap-lh-relaxed); }
small { font-size: var(--ap-fs-small); color: var(--ap-fg-2); }

a  { color: var(--ap-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, kbd { font-family: var(--ap-font-mono); font-size: 0.92em; }