/* ══════════════════════════════════════════════════════════
   Groteska Brand System — shared/brand.css
   Brand book primitives + semantic aliases for site CSS
   ══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Brand Book Primitives ── */

  /* Blueprint Palette */
  --blueprint:       #1B3A5C;
  --blueprint-light:  #2A5A8C;
  --blueprint-faded:  #4A7AAC;
  --line:            #3B82C4;
  --line-light:      #6AADDF;
  --line-faded:      rgba(59, 130, 196, 0.15);

  /* Measurement Red (Primary Accent) */
  --red:             #D94032;
  --red-light:       #E8736A;
  --red-faded:       rgba(217, 64, 50, 0.12);

  /* Signal Green */
  --green:           #2E9E5A;
  --green-light:     #5DBF82;
  --green-faded:     rgba(46, 158, 90, 0.12);

  /* Neutrals: Paper & Ink */
  --ink:             #1A1A2E;
  --graphite:        #2E2E42;
  --pencil:          #5A5A72;
  --grid:            #C8C8D4;
  --paper:           #EEEEF2;
  --sheet:           #F6F6F9;
  --white:           #FFFFFF;

  /* Grid Background */
  --grid-color:      rgba(59, 130, 196, 0.07);
  --grid-strong:     rgba(59, 130, 196, 0.14);

  /* ── Semantic Aliases (match existing site CSS variable names) ── */

  /* Background & Surface */
  --color-background: var(--sheet);
  --color-surface:    var(--white);

  /* Text */
  --color-text:           var(--ink);
  --color-text-secondary: var(--pencil);

  /* Primary = Blueprint blue */
  --color-primary:        var(--line);
  --color-primary-hover:  var(--blueprint-light);
  --color-primary-active: var(--blueprint);

  /* Secondary */
  --color-secondary:        var(--line-faded);
  --color-secondary-hover:  rgba(59, 130, 196, 0.25);
  --color-secondary-active: rgba(59, 130, 196, 0.3);

  /* Borders */
  --color-border:           var(--grid);
  --color-card-border:      var(--grid);
  --color-card-border-inner: var(--grid);

  /* Buttons */
  --color-btn-primary-text: var(--white);

  /* Status */
  --color-error:   var(--red);
  --color-success: var(--green);
  --color-warning: #B8860B;
  --color-info:    var(--pencil);

  /* Focus */
  --color-focus-ring:    rgba(59, 130, 196, 0.4);
  --focus-ring:          0 0 0 3px var(--color-focus-ring);
  --focus-outline:       2px solid var(--color-primary);
  --color-select-caret:  rgba(26, 26, 46, 0.8);

  /* Service card accent backgrounds */
  --color-bg-1: var(--line-faded);
  --color-bg-2: var(--red-faded);
  --color-bg-3: var(--green-faded);
  --color-bg-4: var(--red-faded);
  --color-bg-5: rgba(74, 122, 172, 0.08);
  --color-bg-6: rgba(59, 130, 196, 0.06);
  --color-bg-7: rgba(46, 158, 90, 0.06);
  --color-bg-8: rgba(217, 64, 50, 0.06);

  /* ── Typography ── */
  --font-family-base: 'IBM Plex Sans', sans-serif;
  --font-family-mono: 'Fira Code', monospace;

  --font-size-xs:  11px;
  --font-size-sm:  12px;
  --font-size-base: 14px;
  --font-size-md:  14px;
  --font-size-lg:  16px;
  --font-size-xl:  18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:  1.3;
  --line-height-normal: 1.7;
  --letter-spacing-tight: -0.01em;

  /* ── Spacing (8px base unit) ── */
  --space-0:  0;
  --space-1:  1px;
  --space-2:  2px;
  --space-3:  4px;
  --space-4:  6px;
  --space-5:  8px;
  --space-6:  10px;
  --space-7:  12px;
  --space-8:  16px;
  --space-9:  20px;
  --space-10: 24px;
  --space-11: 32px;

  /* ── Border Radius (brand book: 2-3px, square preferred) ── */
  --radius-sm:   2px;
  --radius-base: 3px;
  --radius-md:   3px;
  --radius-lg:   4px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(26, 26, 46, 0.04);
  --shadow-sm: 0 2px 4px rgba(26, 26, 46, 0.06);
  --shadow-md: 0 4px 12px rgba(26, 26, 46, 0.08);
  --shadow-lg: 0 8px 24px rgba(26, 26, 46, 0.12);

  /* ── Animation ── */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --ease-standard:   cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Select Carets (SVG data URIs) ── */
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A1A2E' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F6F6F9' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Dark Mode ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background:      var(--ink);
    --color-surface:         var(--graphite);
    --color-text:            var(--sheet);
    --color-text-secondary:  var(--grid);
    --color-primary:         var(--line-light);
    --color-primary-hover:   var(--line);
    --color-primary-active:  var(--blueprint-light);
    --color-border:          var(--pencil);
    --color-card-border:     var(--pencil);
    --color-card-border-inner: var(--pencil);
    --color-error:           var(--red-light);
    --color-success:         var(--green-light);
    --color-warning:         #DAA520;
    --color-focus-ring:      rgba(106, 173, 223, 0.4);
    --color-btn-primary-text: var(--ink);
    --color-select-caret:    rgba(246, 246, 249, 0.8);

    /* Dark mode accent backgrounds */
    --color-bg-1: rgba(59, 130, 196, 0.12);
    --color-bg-2: rgba(217, 64, 50, 0.12);
    --color-bg-3: rgba(46, 158, 90, 0.12);
    --color-bg-4: rgba(217, 64, 50, 0.1);
    --color-bg-5: rgba(74, 122, 172, 0.1);
    --color-bg-6: rgba(59, 130, 196, 0.08);
    --color-bg-7: rgba(46, 158, 90, 0.08);
    --color-bg-8: rgba(217, 64, 50, 0.08);
  }
}

/* ── Blueprint Grid Background ── */
body {
  background-color: var(--color-background);
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px),
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px, 128px 128px, 128px 128px;
  font-family: var(--font-family-base);
  color: var(--color-text);
  line-height: var(--line-height-normal);
  font-size: var(--font-size-lg);
}

/* ── Shared Nav Styles ── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(26, 26, 46, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--blueprint-light);
  z-index: 100;
  padding: 0 2rem;
}
.navbar .container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}
.nav-brand { text-decoration: none; }
.nav-brand svg { height: 24px; width: auto; }
.nav-lang {
  font-family: var(--font-family-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
}
.nav-lang:hover { color: rgba(255, 255, 255, 0.8); }
.nav-link {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-link:hover,
.nav-link.active { color: var(--line-light); }