/* ==========================================================================
   VIGEO PT - Global Design System (Theme File)
   ==========================================================================
   This file contains all design tokens for the VIGEO PT brand.
   Import this FIRST in base.html before any other stylesheets.

   Benefits:
   - Single source of truth for brand consistency
   - Change one value to update entire site
   - Easy to implement dark mode or themes later
   - Professional spacing and typography scale
   ========================================================================== */

:root {
  /* ==========================================================================
     BRAND COLORS
     ========================================================================== */

  /* Primary Brand Colors - VIGEO Maroon/Red */
  --color-primary: #af2d2c;
  --color-primary-dark: #8f1e1c;
  --color-primary-light: #c94544;
  --color-primary-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  --color-primary-lightest: #fdf5f5;

  /* Accent Colors - For secondary highlights */
  --color-accent: #af2d2c;
  --color-accent-dark: #8f1e1c;
  --color-accent-light: #c94544;
  --color-accent-gradient: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);

  /* Neutral Colors - Warm tones to match VIGEO Health */
  --color-white: #ffffff;
  --color-off-white: #faf8f6;
  --color-cream: #f5f0eb;
  --color-grey-lightest: #f9f7f5;
  --color-grey-light: #f2efec;
  --color-grey: #e5e0db;
  --color-grey-medium: #cccccc;
  --color-grey-dark: #999999;

  /* Text Colors */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #3d3d3d;
  --color-text-muted: #666666;
  --color-text-light: #757575;
  --color-text-inverse: #ffffff;

  /* Semantic Colors */
  --color-success: #2ECC71;
  --color-warning: #F39C12;
  --color-error: #E74C3C;
  --color-info: #3498DB;

  /* Border Colors */
  --color-border: #e0e0e0;
  --color-border-light: #f0f0f0;
  --color-border-dark: #d0d0d0;

  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */

  /* Font Families */
  --font-primary: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Sizes - Using a modular scale (1.25 ratio) */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md: 1.05rem;     /* ~17px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2rem;       /* 32px */
  --font-size-5xl: 2.5rem;     /* 40px */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.7;
  --line-height-loose: 1.8;

  /* ==========================================================================
     SPACING SYSTEM
     ========================================================================== */

  /* Base spacing unit - all spacing derived from this */
  --space-unit: 8px;

  /* Spacing Scale */
  --space-xs: calc(var(--space-unit) * 0.5);   /* 4px */
  --space-sm: var(--space-unit);                /* 8px */
  --space-md: calc(var(--space-unit) * 2);      /* 16px */
  --space-lg: calc(var(--space-unit) * 3);      /* 24px */
  --space-xl: calc(var(--space-unit) * 4);      /* 32px */
  --space-2xl: calc(var(--space-unit) * 5);     /* 40px */
  --space-3xl: calc(var(--space-unit) * 6);     /* 48px */
  --space-4xl: calc(var(--space-unit) * 7.5);   /* 60px */
  --space-5xl: calc(var(--space-unit) * 10);    /* 80px */

  /* Container & Layout */
  --container-max-width: 1200px;
  --container-padding: var(--space-lg);
  --section-padding: var(--space-4xl);
  --section-padding-mobile: var(--space-2xl);

  /* ==========================================================================
     BORDERS & SHADOWS
     ========================================================================== */

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 50%;
  --radius-pill: 25px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 35px rgba(0, 0, 0, 0.15);

  /* ==========================================================================
     TRANSITIONS & ANIMATIONS
     ========================================================================== */

  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ==========================================================================
     COMPONENT-SPECIFIC TOKENS
     ========================================================================== */

  /* Buttons */
  --btn-padding-y: 12px;
  --btn-padding-x: 24px;
  --btn-padding-y-lg: 14px;
  --btn-padding-x-lg: 30px;
  --btn-font-weight: var(--font-weight-semibold);
  --btn-border-radius: var(--radius-pill);

  /* Cards */
  --card-padding: var(--space-lg);
  --card-border-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);

  /* Forms */
  --input-padding-y: 10px;
  --input-padding-x: 15px;
  --input-border-radius: var(--radius-md);
  --input-border-color: var(--color-border);
  --input-focus-border-color: var(--color-primary);

  /* Hero Sections */
  --hero-height: 300px;
  --hero-height-mobile: 250px;
  --hero-overlay: rgba(0, 0, 0, 0.3);

  /* Navbar */
  --navbar-height: 70px;
  --navbar-bg: var(--color-white);

  /* Footer */
  --footer-bg: var(--color-text-primary);
  --footer-text: var(--color-white);

  /* ==========================================================================
     BREAKPOINTS (for reference - use in media queries)
     ========================================================================== */

  /*
   * Mobile:  < 576px
   * Tablet:  >= 576px and < 768px
   * Small:   >= 768px and < 992px
   * Medium:  >= 992px and < 1200px
   * Large:   >= 1200px
   */
}

/* ==========================================================================
   GLOBAL RESETS & BASE STYLES
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   TYPOGRAPHY BASE
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin-top: 0;
}

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

p {
  margin-top: 0;
  margin-bottom: var(--space-md);
}

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

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

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-text-muted); }
.text-white { color: var(--color-white); }

.bg-primary { background-color: var(--color-primary); }
.bg-light { background-color: var(--color-off-white); }
.bg-white { background-color: var(--color-white); }

.section-padding {
  padding: var(--section-padding) var(--container-padding);
}

@media (max-width: 768px) {
  .section-padding {
    padding: var(--section-padding-mobile) var(--space-md);
  }
}