/* =============================================
   BARBERMAXX DESIGN SYSTEM — colors_and_type.css
   Source: Brand Guide (Adobe Illustrator, Feb 2025)
   ============================================= */

/* -----------------------------------------------
   GOOGLE FONTS IMPORT
   Note: BARBERSHOP.otf not available — using Anton
   as display substitute. Montserrat is canonical.
----------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* -----------------------------------------------
   BASE COLOR TOKENS
----------------------------------------------- */
:root {
  /* Brand Core */
  --color-red:          #4F86C6;   /* CMYK approx: 0,100,90,0 — primary brand red */
  --color-red-dark:     #3a6eaa;   /* CMYK 15,100,90,10 — deeper red, hover/active */
  --color-red-light:    #6b9fd4;   /* Lighter variant for highlights */

  /* Neutrals — Dark System */
  --color-black:        #0a0a0a;   /* Near-black base background */
  --color-gray-900:     #111111;
  --color-gray-800:     #1a1a1a;   /* Card surfaces */
  --color-gray-700:     #262626;   /* Elevated cards */
  --color-gray-600:     #333333;
  --color-gray-500:     #4d4d4d;
  --color-gray-400:     #666666;
  --color-gray-300:     #808080;   /* Secondary text on dark */
  --color-gray-200:     #b3b3b3;   /* Disabled states */
  --color-gray-100:     #e6e6e6;   /* Subtle dividers on light */
  --color-white:        #ffffff;

  /* Semantic Colors */
  --color-bg-base:      var(--color-black);
  --color-bg-surface:   var(--color-gray-800);
  --color-bg-elevated:  var(--color-gray-700);
  --color-fg-primary:   var(--color-white);
  --color-fg-secondary: var(--color-gray-300);
  --color-fg-muted:     var(--color-gray-400);
  --color-accent:       var(--color-red);
  --color-accent-hover: var(--color-red-dark);
  --color-border:       var(--color-gray-700);
  --color-border-strong:#444444;

  /* Status */
  --color-success:      #22cf00;   /* CMYK 85,10,100,10 */
  --color-warning:      #ff8000;   /* CMYK 0,50,100,0 */
  --color-error:        var(--color-red);

  /* -----------------------------------------------
     TYPOGRAPHY TOKENS
  ----------------------------------------------- */

  /* Font Families */
  --font-display:   'Anton', 'Impact', sans-serif;       /* BARBERSHOP substitute */
  --font-body:      'Montserrat', 'Helvetica Neue', sans-serif;
  --font-mono:      'Courier New', 'Courier', monospace;

  /* Font Sizes — Mobile-first scale */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.5rem;     /* 40px */
  --text-4xl:   3.5rem;     /* 56px */
  --text-5xl:   5rem;       /* 80px */

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   900;

  /* Line Heights */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

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

  /* -----------------------------------------------
     SPACING TOKENS
  ----------------------------------------------- */
  --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 TOKENS
  ----------------------------------------------- */
  --radius-none:  0px;
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-pill:  9999px;

  /* -----------------------------------------------
     SHADOW TOKENS
  ----------------------------------------------- */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.6);
  --shadow-red:   0 4px 20px rgba(79,134,198,0.3);

  /* -----------------------------------------------
     TRANSITIONS
  ----------------------------------------------- */
  --transition-fast:    150ms ease-in-out;
  --transition-normal:  250ms ease-in-out;
  --transition-slow:    400ms ease-in-out;
}

/* -----------------------------------------------
   SEMANTIC ELEMENT STYLES
----------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-fg-primary);
  background-color: var(--color-bg-base);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

h3 {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

h5, h6 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

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

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

label, .label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.caption {
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  letter-spacing: var(--tracking-wide);
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--color-gray-800);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}