/* ============================================================
   AUDIREAL DESIGN SYSTEM — Colors & Typography
   Source: Paleta de cores.pdf (Kangoo Digital, 2025)
   Fonts: Comfortaa (display/brand), Montserrat (UI/body)
   ============================================================ */

/* ── Fonts ───────────────────────────────────────────────── */

@font-face {
  font-family: 'Comfortaa';
  src: url('fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}

/* ── Color Tokens ────────────────────────────────────────── */

:root {
  /* Primary — Orange/Yellow (CTAs, active states, highlights) */
  --brand-light:    #F9EA22;
  --brand-medium:   #F9AB1E;
  --brand-pure:     #F7941D;
  --brand-hover:    #D47A0D;
  --brand-active:   #A15801;

  /* Secondary — Teal/Blue (backgrounds, banners, brand surfaces) */
  --secondary-light:  #18ADA0;
  --secondary-medium: #17869C;
  --secondary-pure:   #226B96;
  --secondary-hover:  #0F4667;
  --secondary-active: #04273B;

  /* Gray Scale */
  --gray-950: #0C111D;
  --gray-900: #101828;
  --gray-800: #182230;
  --gray-700: #344054;
  --gray-600: #475467;
  --gray-500: #667085;
  --gray-400: #98A2B3;
  --gray-300: #D0D5DD;
  --gray-200: #EAECF0;
  --gray-100: #F2F4F7;

  /* White */
  --white: #FFFFFF;

  /* ── Semantic Color Tokens ──────────────────────────────── */

  /* Foreground */
  --fg-1: var(--gray-900);     /* Primary text */
  --fg-2: var(--gray-700);     /* Secondary text */
  --fg-3: var(--gray-500);     /* Tertiary / placeholder */
  --fg-disabled: var(--gray-400);
  --fg-inverse: var(--white);
  --fg-brand: var(--brand-pure);
  --fg-accent: var(--secondary-pure);

  /* Background */
  --bg-base:    var(--white);
  --bg-subtle:  var(--gray-100);
  --bg-muted:   var(--gray-200);
  --bg-brand:   var(--brand-pure);
  --bg-accent:  var(--secondary-pure);
  --bg-dark:    var(--secondary-active);

  /* Border */
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-brand:   var(--brand-pure);
  --border-accent:  var(--secondary-medium);

  /* Interactive */
  --cta-bg:           var(--brand-pure);
  --cta-bg-hover:     var(--brand-hover);
  --cta-bg-active:    var(--brand-active);
  --cta-text:         var(--white);
  --link-default:     var(--secondary-pure);
  --link-hover:       var(--secondary-hover);

  /* Status */
  --status-success: #12B76A;
  --status-warning: var(--brand-medium);
  --status-error:   #F04438;
  --status-info:    var(--secondary-medium);

  /* ── Spacing Scale (8px base) ───────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Border Radius ──────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 8px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 24px rgba(16, 24, 40, 0.10), 0 4px 8px rgba(16, 24, 40, 0.06);
  --shadow-xl: 0 20px 40px rgba(16, 24, 40, 0.12), 0 8px 16px rgba(16, 24, 40, 0.08);

  /* ── Typography Scale ───────────────────────────────────── */
  --font-display: 'Comfortaa', 'Trebuchet MS', sans-serif;
  --font-body:    'Montserrat', 'Segoe UI', sans-serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   19px;
  --text-xl:   22px;
  --text-2xl:  26px;
  --text-3xl:  32px;
  --text-4xl:  40px;
  --text-5xl:  52px;
  --text-6xl:  64px;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-wider: 0.08em;

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast:   150ms ease-in-out;
  --transition-base:   220ms ease-in-out;
  --transition-slow:   350ms ease-in-out;
}

/* ── Base Semantic Styles ────────────────────────────────── */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--fg-1);
  line-height: var(--leading-normal);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl);  }
h6 { font-size: var(--text-lg);  }

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--fg-2);
  line-height: var(--leading-relaxed);
}

.label, label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--fg-3);
  line-height: var(--leading-normal);
}

a {
  color: var(--link-default);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--link-hover); }