/* General Coins — design tokens
 * Generated from the brand guideline (navy + gunmetal + cream).
 * Consume the semantic --gc-* tokens; avoid raw hex in component CSS. */

:root {
  /* Brand core */
  --gc-navy:      #0B1426; /* primary: text, dark surfaces, mark fill */
  --gc-gunmetal:  #7A8FA8; /* accent: fills, underlines, borders (never text on cream) */
  --gc-slate:     #5E6B7D; /* tertiary: UI, dividers */
  --gc-slate-700: #3A424E; /* body secondary on cream (AA: 5.18:1) */
  --gc-gunmetal-400: #8AA0B9; /* accent on navy (perceptual parity) */
  --gc-cream:     #FAFAF7; /* page surface — warm, never pure white */

  /* Surfaces — light */
  --gc-surface:          #FAFAF7; /* page background (cream) */
  --gc-surface-elevated: #FFFFFF; /* cards, dialogs */
  --gc-surface-sunken:   #F0EFE8; /* alternate sections */
  --gc-border-subtle:    #E5E3DA; /* hairline dividers */

  /* Surfaces — dark (navy stripe) */
  --gc-dark-surface:   #0B1426;
  --gc-dark-elevated:  #141E33;
  --gc-dark-raised:    #1C2740;
  --gc-dark-border:    #1A2440;
  --gc-dark-secondary: #AEB9C9; /* body secondary on navy */

  /* Semantic — light context */
  --gc-content-primary:    var(--gc-navy);
  --gc-content-secondary:  var(--gc-slate-700);
  --gc-eyebrow:            var(--gc-slate-700); /* slate on cream, AA-safe */
  --gc-accent:             var(--gc-gunmetal);  /* underlines, fills */
  --gc-content-on-accent:  var(--gc-navy);      /* navy text on gunmetal */

  /* Spacing scale (multiples of 4) */
  --gc-space-1:  4px;
  --gc-space-2:  8px;
  --gc-space-3:  12px;
  --gc-space-4:  16px;
  --gc-space-6:  24px;
  --gc-space-8:  32px;
  --gc-space-12: 48px;
  --gc-space-16: 64px;
  --gc-space-20: 80px;
  --gc-space-24: 96px;
  --gc-space-32: 128px;

  /* Page side padding */
  --gc-pad-x: 60px;          /* mobile */
}

@media (min-width: 768px) {
  :root { --gc-pad-x: 100px; } /* desktop */
}