/* Design tokens — loaded first by both layouts */

:root {
  /* Layout */
  --header-height: 52px;

  /* Backgrounds */
  --color-bg-darkest:    #0b1d12;
  --color-bg-dark:       #1a5c30;
  --color-card-bg:       rgba(15, 35, 22, 0.92);
  --color-card-bg-alt:   rgba(11, 29, 18, 0.88);
  --color-surface-xs:    rgba(255, 255, 255, 0.05);
  --color-surface-sm:    rgba(255, 255, 255, 0.07);

  /* Brand */
  --color-green:         #7ecf9a;
  --color-green-light:   #c8f7e8;
  --color-gold:          #ffd700;
  --color-error:         #ef4444;

  /* Green border overlays */
  --color-border-faint:  rgba(126, 207, 154, 0.1);
  --color-border-subtle: rgba(126, 207, 154, 0.18);
  --color-border-mid:    rgba(126, 207, 154, 0.25);
  --color-border-strong: rgba(126, 207, 154, 0.4);

  /* White text / overlay scale */
  --color-text-full:     #ffffff;
  --color-text-high:     rgba(255, 255, 255, 0.85);
  --color-text-med:      rgba(255, 255, 255, 0.75);
  --color-text-70:       rgba(255, 255, 255, 0.7);
  --color-text-dim:      rgba(255, 255, 255, 0.55);
  --color-text-muted:    rgba(255, 255, 255, 0.45);
  --color-text-faint:    rgba(255, 255, 255, 0.3);

  /* Border radius */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   14px;
  --radius-full: 50%;

  /* Font sizes */
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   18px;

  /* Effects */
  --backdrop-blur: blur(8px);
}