/* ============================================================
   ReservAI Design System — Colors & Typography
   Source: RafaelEVelazcor/ReservAI---Landing + ReservAIFront
   ============================================================ */

/* Local Roboto — uploaded brand font */
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Remaining weights served via Google Fonts as supplement */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;600;700;900&display=swap');

/* ─── BASE COLOR TOKENS ─────────────────────────────────── */
:root {
  /* Brand */
  --reservai-blue:         #0983d6;   /* App primary — main brand blue */
  --reservai-blue-light:   #00AEEF;   /* Landing accent — lighter blue */
  --reservai-blue-hover:   #008bbd;   /* Hover / darker blue */
  --reservai-blue-deep:    #0098d4;   /* Landing hover */

  /* Backgrounds */
  --bg-black:              #000000;   /* Landing background */
  --bg-dark:               #0D0D0D;   /* App background */
  --bg-card:               #1A1A1A;   /* Card / modal background */
  --bg-input:              #2C2C2C;   /* Input field background */
  --bg-hover:              #3A3A3A;   /* Hover state on inputs */
  --bg-subtle:             #0a0a0a;   /* Section alternation */
  --bg-glass:              rgba(255, 255, 255, 0.05);  /* Glass card bg */
  --bg-glass-border:       rgba(255, 255, 255, 0.10);  /* Glass card border */

  /* Text */
  --text-white:            #FFFFFF;
  --text-gray:             #A0A0A0;   /* Muted descriptions */
  --text-gray-mid:         #999999;   /* Landing muted text */
  --text-gray-dark:        #666666;   /* Landing secondary */
  --text-gray-darker:      #333333;   /* Landing borders */

  /* Semantic / Status */
  --color-success:         #4CAF50;
  --color-error:           #f44336;
  --color-error-soft:      #ff6b6b;
  --color-warning:         #ff9800;
  --color-whatsapp:        #25D366;
  --color-whatsapp-hover:  #20BA5A;

  /* Gradient backgrounds */
  --gradient-app:          linear-gradient(2deg, #0D0D0D, #0983d6);
  --gradient-login:        linear-gradient(15deg, #0D0D0D, #0983d6);
  --gradient-landing-hero: linear-gradient(135deg, #000000 0%, #111111 100%);

  /* ─── SEMANTIC ALIASES ──────────────────────────────────── */
  --color-primary:         var(--reservai-blue);
  --color-primary-hover:   var(--reservai-blue-hover);
  --color-bg:              var(--bg-dark);
  --color-surface:         var(--bg-card);
  --color-border:          var(--bg-glass-border);
  --color-fg:              var(--text-white);
  --color-fg-muted:        var(--text-gray);

  /* ─── SPACING ───────────────────────────────────────────── */
  --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;

  /* ─── BORDER RADIUS ─────────────────────────────────────── */
  --radius-sm:     4px;   /* checkmarks */
  --radius-md:     8px;   /* buttons, inputs */
  --radius-lg:     12px;  /* modals, login box */
  --radius-xl:     15px;  /* cards */
  --radius-2xl:    20px;  /* hero mockup, badges */
  --radius-full:   50%;   /* circles */

  /* ─── SHADOWS ───────────────────────────────────────────── */
  --shadow-card-hover:    0 20px 40px rgba(9, 131, 214, 0.12);
  --shadow-btn-primary:   0 10px 25px rgba(9, 131, 214, 0.30);
  --shadow-login:         50px 50px 100px #1c4c5d, -50px -50px 100px #0983d6;
  --shadow-modal:         0 10px 30px rgba(0, 0, 0, 0.60);
  --shadow-list-item:     0 2px 8px rgba(0, 0, 0, 0.10);

  /* ─── TRANSITIONS ───────────────────────────────────────── */
  --transition:           all 0.3s ease;
  --transition-fast:      all 0.18s ease;

  /* ─── TYPOGRAPHY ────────────────────────────────────────── */
  --font-sans:    'Roboto', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* Scale */
  --text-xs:      0.75rem;   /* 12px */
  --text-sm:      0.875rem;  /* 14px */
  --text-base:    1rem;      /* 16px */
  --text-lg:      1.1rem;    /* ~18px */
  --text-xl:      1.25rem;   /* 20px */
  --text-2xl:     1.5rem;    /* 24px */
  --text-3xl:     2rem;      /* 32px */
  --text-4xl:     2.5rem;    /* 40px */
  --text-5xl:     3rem;      /* 48px */

  /* Weights */
  --font-light:     300;
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-black:     900;

  /* Line heights */
  --leading-tight:    1.2;
  --leading-snug:     1.4;
  --leading-normal:   1.6;
  --leading-relaxed:  1.8;
}

/* ─── BASE STYLES ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-fg);
  background-color: var(--color-bg);
}

/* ─── TYPE ELEMENT STYLES ───────────────────────────────── */
h1 {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-fg);
}

h2 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-fg);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--color-fg);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--color-fg);
}

p {
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-fg-muted);
}

small {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover { color: var(--color-primary-hover); }

/* ─── UTILITY CLASSES ───────────────────────────────────── */
.text-accent   { color: var(--color-primary); }
.text-muted    { color: var(--color-fg-muted); }
.text-white    { color: var(--text-white); }
.bg-dark       { background: var(--bg-dark); }
.bg-card       { background: var(--bg-card); }
.bg-glass {
  background: var(--bg-glass);
  border: 1px solid var(--bg-glass-border);
  backdrop-filter: blur(10px);
}
.gradient-app  { background: var(--gradient-app); }