/* AMARBARO portfolio site: the design tokens and the document reset.
   Ported from amarbaro.com/app/globals.css. Every page of this site loads
   this sheet first, then its own chrome and its own page sheet. */
/* AMARBARO — System Deck.
   Technical operating surface, carbon dark palette, olive-emerald accents
   matching the brand circuit-tree mark (#9DAE51). */

:root {
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --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;

  --radius-sm: 2px;
  --radius: 4px;
  --radius-md: 6px;
  --transition-fast: 100ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 300ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Carbon Dark Deck (Default) */
  --bg:             #080B10;
  --bg-subtle:      #0C1017;
  --surface:        #0F141D;
  --surface-hover:  #161D2A;
  --surface-active: #1D2636;
  --border:         #1E2736;
  --border-subtle:  #141B24;
  --border-accent:  rgba(157, 174, 81, 0.35);

  /* Brand Colors from masters/amarbaro-symbol.svg */
  --accent:         #9DAE51;              /* Brand Olive */
  --accent-light:   #B5C862;
  --accent-soft:    rgba(157, 174, 81, 0.12);
  --accent-glow:    rgba(157, 174, 81, 0.22);
  --emerald:        #22C55E;
  --emerald-soft:   rgba(34, 197, 94, 0.14);

  --text-1:         #F3F6FA;
  --text-2:         #94A3B8;
  --text-3:         #77879E;
  --text-inverse:   #080B10;

  --alert:          #EF4444;
  --alert-soft:     rgba(239, 68, 68, 0.15);
  --warning:        #F59E0B;
  --success:        #22C55E;

  --grid-dot:       rgba(157, 174, 81, 0.18);
  --grid-line:      rgba(255, 255, 255, 0.04);
}

[data-theme="light"] {
  --bg:             #F5F7F9;
  --bg-subtle:      #EAEEF2;
  --surface:        #FFFFFF;
  --surface-hover:  #F0F3F6;
  --surface-active: #E4E9EE;
  --border:         #D0D8E2;
  --border-subtle:  #E2E8F0;
  --border-accent:  rgba(85, 102, 31, 0.35);

  --accent:         #55661F;              /* Darker olive for AA compliance on light */
  --accent-light:   #637824;
  --accent-soft:    rgba(85, 102, 31, 0.10);
  --accent-glow:    rgba(85, 102, 31, 0.18);
  --emerald:        #15803D;
  --emerald-soft:   rgba(21, 128, 61, 0.12);

  --text-1:         #0A0F16;
  --text-2:         #334155;
  --text-3:         #5A687D;
  --text-inverse:   #FFFFFF;

  --alert:          #DC2626;
  --alert-soft:     rgba(220, 38, 38, 0.12);
  --warning:        #A95D05;
  --success:        #15803D;

  --grid-dot:       rgba(85, 102, 31, 0.22);
  --grid-line:      rgba(0, 0, 0, 0.05);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition-slow), color var(--transition-slow);
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

code, pre {
  font-family: var(--font-mono);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ── brand marks (ported from components/BrandMedia.module.css) ──────
   Two files per mark, one per scheme; the :global() wrapper the CSS module
   needed is gone because these class names are already page-global here. */
.brandMark { display: inline-flex; align-items: center; justify-content: center; }

.brandImg {
  display: block;
  max-width: 100%;
  height: auto;
  /* The mark is the brand's only unique asset. Nothing here stops a
     screenshot; this removes the one-gesture grabs. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.darkOnly { display: block; }
.lightOnly { display: none; }
[data-theme="light"] .darkOnly { display: none !important; }
[data-theme="light"] .lightOnly { display: block !important; }