/*
  CSS Custom Properties (Variables)
  Design system for Khalid Shamim Patents website
  Conservative, muted palette with brown and turquoise accents
*/

:root {
  /* ========================================
     COLOR PALETTE
     Muted tones with brown and turquoise accents
     ======================================== */

  /* Primary Colors - Brown */
  --color-primary: #8B6F47;           /* Muted brown - primary brand color */
  --color-primary-light: #A8896E;     /* Lighter brown - hover states */
  --color-primary-dark: #6B5537;      /* Darker brown - active states */

  /* Accent Colors - Turquoise */
  --color-accent: #5F9EA0;            /* Cadet blue/turquoise - links, highlights */
  --color-accent-light: #7DB4B6;      /* Light turquoise - hover */
  --color-accent-dark: #4A7C7E;       /* Dark turquoise - active */

  /* Neutral Colors */
  --color-text: #2C2C2C;              /* Almost black - body text */
  --color-text-light: #5A5A5A;        /* Medium gray - secondary text */
  --color-text-lighter: #8A8A8A;      /* Light gray - meta info */

  --color-background: #FAFAF8;        /* Off-white - page background */
  --color-surface: #FFFFFF;           /* Pure white - cards, modals */
  --color-surface-dark: #F5F5F0;      /* Light gray - alternate backgrounds */

  --color-border: #E0E0D8;            /* Light gray-beige - borders */
  --color-border-light: #EFEFEA;      /* Very light border */

  /* Semantic Colors */
  --color-success: #4A7C59;           /* Muted green */
  --color-error: #A04A4A;             /* Muted red */
  --color-warning: #A08B4A;           /* Muted yellow-orange */
  --color-info: var(--color-accent);  /* Use turquoise for info */


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

  /* Font Families */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;
  --font-secondary: Georgia, 'Times New Roman', serif;
  --font-mono: 'Courier New', Courier, monospace;

  /* Font Sizes - Modular scale (1.250 - Major Third) */
  --font-size-xs: 0.8rem;             /* 12.8px */
  --font-size-sm: 0.875rem;           /* 14px */
  --font-size-base: 1rem;             /* 16px */
  --font-size-md: 1.125rem;           /* 18px */
  --font-size-lg: 1.25rem;            /* 20px */
  --font-size-xl: 1.563rem;           /* 25px */
  --font-size-2xl: 1.953rem;          /* 31.25px */
  --font-size-3xl: 2.441rem;          /* 39px */
  --font-size-4xl: 3.052rem;          /* 48.83px */

  /* 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-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;


  /* ========================================
     SPACING
     Based on 8px grid system
     ======================================== */

  --space-xs: 0.5rem;     /* 8px */
  --space-sm: 1rem;       /* 16px */
  --space-md: 1.5rem;     /* 24px */
  --space-lg: 2rem;       /* 32px */
  --space-xl: 3rem;       /* 48px */
  --space-2xl: 4rem;      /* 64px */
  --space-3xl: 6rem;      /* 96px */
  --space-4xl: 8rem;      /* 128px */


  /* ========================================
     LAYOUT
     ======================================== */

  --container-max-width: 1200px;
  --container-padding: var(--space-md);

  --header-height: 80px;
  --footer-height: auto;

  /* Breakpoints (for reference in media queries) */
  /* Small: 640px */
  /* Medium: 768px */
  /* Large: 1024px */
  /* XLarge: 1280px */
  /* 2XLarge: 1536px */


  /* ========================================
     BORDER RADIUS
     ======================================== */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;


  /* ========================================
     SHADOWS
     Subtle shadows for depth
     ======================================== */

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 24px 0 rgba(0, 0, 0, 0.18);


  /* ========================================
     TRANSITIONS
     ======================================== */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  --transition-all: all var(--transition-base);
  --transition-colors: background-color var(--transition-base),
                       color var(--transition-base),
                       border-color var(--transition-base);


  /* ========================================
     Z-INDEX SCALE
     Consistent layering
     ======================================== */

  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}


/* ========================================
   MOBILE ADJUSTMENTS
   Smaller spacing and typography on mobile
   ======================================== */

@media (max-width: 768px) {
  :root {
    --font-size-3xl: 2rem;        /* 32px instead of 39px */
    --font-size-4xl: 2.5rem;      /* 40px instead of 48.83px */

    --container-padding: var(--space-sm);

    --header-height: 64px;

    --space-xl: 2.5rem;    /* 40px instead of 48px */
    --space-2xl: 3rem;     /* 48px instead of 64px */
    --space-3xl: 4rem;     /* 64px instead of 96px */
  }
}