/**
 * VelumCode — Design tokens V5
 * Light premium: branco protagonista · cyan institucional em ação
 * Foundation: silêncio > ornamento · hairline só quando estrutura precisa
 */

:root {
  color-scheme: light;

  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;

  /* Neutrals (slate stack) */
  --color-primary-900: #0f172a;
  --color-primary-800: #1e293b;
  --color-primary-700: #334155;
  --color-primary-600: #475569;
  --color-primary-500: #64748b;

  /* Accent — ação institucional */
  --color-accent-400: #22d3ee;
  --color-accent-500: #06c6f5;
  --color-accent-600: #00b4e6;
  --color-accent-700: #0891b2;

  --color-secondary-100: #f1f5f9;
  --color-secondary-200: #e2e8f0;
  --color-secondary-400: #94a3b8;
  --color-secondary-500: #64748b;

  /* Surfaces */
  --color-bg-base: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-subtle: #f8fafc;

  /* Borders */
  --color-border-light: #f1f5f9;
  --color-border-default: #e2e8f0;
  --color-border-accent: #06c6f5;

  /* Text */
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-tertiary: #94a3b8;
  --color-text-inverse: #ffffff;
  --color-text-inverse-secondary: rgba(255, 255, 255, 0.72);
  --color-text-on-accent: #ffffff;
  --color-text-accent: #06c6f5;
  --color-text-accent-light: #22d3ee;

  /* Compat aliases (legacy dark-named tokens → slate ink) */
  --color-bg-dark: #0f172a;
  --color-bg-dark-elevated: #1e293b;
  --color-border-dark: #334155;

  /* Semantic */
  --color-success: #16a34a;
  --color-success-bg: rgba(22, 163, 74, 0.08);
  --color-error: #dc2626;
  --color-error-bg: rgba(220, 38, 38, 0.08);
  --color-whatsapp: var(--color-accent-500);
  --color-whatsapp-hover: var(--color-accent-600);

  /* Atmosphere — wash cyan discreto */
  --color-glow-accent: rgba(6, 198, 245, 0.12);
  --color-glow-soft: rgba(6, 198, 245, 0.06);
  --color-noise: rgba(15, 23, 42, 0.02);

  /* Typography — família única */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;

  /*
   * VelumCode Type Scale — fonte única de verdade
   * Display → H1 → H2 → H3 → H4 → Body Large → Body → Small → Caption / Label
   */
  --type-display: clamp(2.5rem, 5.2vw, 3.75rem);
  --type-h1: clamp(1.875rem, 3.5vw, 2.5rem);
  --type-h2: clamp(1.5rem, 2.6vw, 2rem);
  --type-h3: 1.25rem;
  --type-h4: 1.0625rem;
  --type-body-lg: 1.125rem;
  --type-body: 1rem;
  --type-small: 0.875rem;
  --type-caption: 0.75rem;
  --type-label: 0.75rem;

  --type-display-lh: 1.05;
  --type-h1-lh: 1.12;
  --type-h2-lh: 1.2;
  --type-h3-lh: 1.25;
  --type-h4-lh: 1.35;
  --type-body-lg-lh: 1.6;
  --type-body-lh: 1.6;
  --type-small-lh: 1.55;
  --type-caption-lh: 1.4;
  --type-label-lh: 1.3;

  --type-display-weight: 700;
  --type-h1-weight: 700;
  --type-h2-weight: 600;
  --type-h3-weight: 600;
  --type-h4-weight: 600;
  --type-body-weight: 400;
  --type-body-lg-weight: 400;
  --type-small-weight: 400;
  --type-caption-weight: 400;
  --type-label-weight: 600;

  --type-display-tracking: -0.035em;
  --type-h1-tracking: -0.03em;
  --type-h2-tracking: -0.025em;
  --type-h3-tracking: -0.02em;
  --type-h4-tracking: -0.015em;
  --type-label-tracking: 0.08em;
  --type-caption-tracking: 0.02em;

  --type-title-body-gap: var(--space-3);
  --type-h2-subtitle-gap: var(--space-4);
  --type-label-title-gap: var(--space-3);

  /* Aliases legados → escala unificada */
  --text-display-xl: 4rem;
  --text-display-lg: var(--type-display);
  --text-display-md: var(--type-h1);
  --text-heading-lg: var(--type-h2);
  --text-heading-md: var(--type-h3);
  --text-heading-sm: var(--type-h4);
  --text-body-lg: var(--type-body-lg);
  --text-body-md: var(--type-body);
  --text-body-sm: var(--type-small);
  --text-caption: var(--type-caption);
  --text-overline: var(--type-label);
  --text-mono-sm: var(--type-caption);

  --line-height-display-xl: var(--type-display-lh);
  --line-height-display-lg: var(--type-display-lh);
  --line-height-display-md: var(--type-h1-lh);
  --line-height-display: var(--type-display-lh);
  --line-height-heading-lg: var(--type-h2-lh);
  --line-height-heading-md: var(--type-h3-lh);
  --line-height-heading-sm: var(--type-h4-lh);
  --line-height-body-lg: var(--type-body-lg-lh);
  --line-height-body-md: var(--type-body-lh);
  --line-height-body-sm: var(--type-small-lh);
  --line-height-caption: var(--type-caption-lh);

  --tracking-display: var(--type-display-tracking);
  --tracking-heading: var(--type-h3-tracking);
  --tracking-overline: var(--type-label-tracking);
  --tracking-caption: var(--type-caption-tracking);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --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-32: 8rem;

  /* Layout */
  --container-max: 80rem;
  --container-narrow: 42rem;
  --header-height: 3.5rem;
  --header-height-desktop: 4rem;
  --section-padding-y: var(--space-20);
  --section-padding-y-lg: var(--space-24);
  --section-padding-y-xl: var(--space-32);
  --section-header-max: 40rem;
  --section-header-gap: var(--space-14, var(--space-12));
  --section-header-gap-lg: var(--space-16);
  --hero-copy-max: 36rem;
  --hero-visual-max: 36rem;
  --card-padding: var(--space-6);
  --card-padding-lg: var(--space-8);
  --card-hover-lift: -2px;
  --gutter-mobile: var(--space-5);
  --gutter-desktop: var(--space-8);
  --z-header: 100;
  --z-mobile-menu: 110;
  --z-fab: 90;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-icon: 8px;
  --radius-full: 9999px;

  /* Elevation — soft, diffused (Stripe-level finish) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.1);
  --shadow-focus: 0 0 0 3px rgba(6, 198, 245, 0.35);
  --shadow-accent: 0 4px 16px rgba(6, 198, 245, 0.28);

  --shadow-hero-showcase: var(--shadow-lg);
  --shadow-btn-primary-hover: var(--shadow-accent);
  --shadow-project-card: var(--shadow-sm);
  --shadow-project-card-hover: var(--shadow-md);
  --shadow-case-primary: var(--shadow-md);
  --shadow-case-secondary: var(--shadow-sm);
  --shadow-case-hover: var(--shadow-lg);
  --shadow-service-card: var(--shadow-sm);
  --shadow-service-card-hover: var(--shadow-md);

  /* Motion */
  --duration-fast: 160ms;
  --duration-normal: 240ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Header glass light */
  --header-bg-scrolled: rgba(255, 255, 255, 0.82);
  --header-shadow-scrolled: 0 1px 0 rgba(226, 232, 240, 0.75), 0 8px 24px rgba(15, 23, 42, 0.04);
  --header-blur: 20px;
  --header-bg-top: transparent;
}

@media (min-width: 1024px) {
  :root {
    --header-height: var(--header-height-desktop);
    --section-padding-y: var(--section-padding-y-lg);
  }
}

@media (min-width: 1440px) {
  :root {
    --section-padding-y: var(--section-padding-y-xl);
  }
}