/* ============================================
   RC PAINTING — DESIGN SYSTEM
   design-system.css
   ============================================ */

/* ============================================
   GOOGLE FONTS IMPORT
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;1,9..40,300;1,9..40,400&display=swap');

/* ============================================
   ROOT TOKENS
   ============================================ */
:root {

  /* ------------------------------------------
     COLORS — Primary
  ------------------------------------------ */
  --color-black:        #1C1C1E;   /* Carbon Black — headings, dark backgrounds */
  --color-white:        #FAFAF7;   /* Porcelain — page background, light sections */

  /* ------------------------------------------
     COLORS — Accent
  ------------------------------------------ */
  --color-accent-tint:   #FFF3CC;   /* Gold Tint — subtle backgrounds, badges */
  --color-accent-light:  #FFE49D;   /* Light Gold — highlights */
  --color-accent:        #FFC82A;   /* Gold — CTAs, highlights, links */
  --color-accent-dark:   #E6A800;   /* Deep Gold — hover states */
  --color-accent-darker: #B38200;   /* Darkest Gold — emphasis */

  /* ------------------------------------------
     COLORS — Text
  ------------------------------------------ */
  --color-text-primary:   #1C1C1E; /* Primary text */
  --color-text-secondary: #4A4A4A; /* Subheadings, descriptions */
  --color-text-muted:     #6B6B6B; /* Captions, meta info */
  --color-text-inverse:   #FAFAF7; /* Text on dark backgrounds */

  /* ------------------------------------------
     COLORS — UI
  ------------------------------------------ */
  --color-border:       #E0E0DC;   /* Dividers, input borders */
  --color-card-dark:    #2C2C2E;   /* Dark card / section background */
  --color-hover-light:  #F0F0EB;   /* Subtle hover on light backgrounds */

  /* ------------------------------------------
     TYPOGRAPHY
  ------------------------------------------ */
  --font-family: 'DM Sans', sans-serif;

  --font-300: 300;
  --font-400: 400;
  --font-500: 500;
  --font-600: 600;
  --font-700: 700;
  --font-800: 800;
  --font-900: 900;

  /* Font sizes */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */
  --text-7xl:  4.5rem;    /* 72px */
  --text-8xl:  5rem;
  --text-9xl:  6rem;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.15em;

  /* ------------------------------------------
     SPACING SCALE (base 16px / 1rem)
  ------------------------------------------ */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */
  --space-10: 8rem;     /* 128px */

  /* ------------------------------------------
     BORDER RADIUS
  ------------------------------------------ */
  --radius-sm:   4px;     /* Inputs, small badges */
  --radius-md:   8px;     /* Cards, buttons */
  --radius-lg:   16px;    /* Large cards, image containers */
  --radius-full: 9999px;  /* Pill buttons, tags */

  /* ------------------------------------------
     SHADOWS
  ------------------------------------------ */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);          /* Subtle lift, cards at rest */
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.10);         /* Hover states, dropdowns */
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.12);         /* Modals, floating elements */
  --shadow-dark: 0 4px 16px rgba(0, 0, 0, 0.35);         /* Elements on dark backgrounds */

  /* ------------------------------------------
     LAYOUT
  ------------------------------------------ */
  --container:    1200px;  /* Main content wrapper */
  --container-sm: 768px;   /* Narrow content — about text, blog */

  /* ------------------------------------------
     TRANSITIONS
  ------------------------------------------ */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
}

/* ============================================
   BASE RESET & DEFAULTS
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%; /* 1rem = 16px — browser default respected */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

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

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font-family: var(--font-family);
  cursor: pointer;
  border: none;
  background: none;
}

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

/* Container */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container-sm {
  width: 100%;
  max-width: var(--container-sm);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-600);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-base),
              color var(--transition-base),
              box-shadow var(--transition-base);
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-black);
}

.btn-primary:hover {
  background-color: var(--color-accent-dark);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-outline:hover {
  background-color: var(--color-accent-tint);
}

.btn-dark {
  background-color: var(--color-black);
  color: var(--color-white);
}

.btn-dark:hover {
  background-color: var(--color-card-dark);
  box-shadow: var(--shadow-md);
}