/* ============================================================
   BASE.CSS  –  CSS variables, reset, and global element styles
   ============================================================ */

:root {
  /* Brand colours */
  --aikido-green:       #1a2f23;
  --aikido-green-light: #22382a;
  --aikido-red:         #d92027;
  --white:              #ffffff;
  --black:              #000000;

  /* Transparent white */
  --white-10: rgba(255,255,255,0.1);
  --white-20: rgba(255,255,255,0.2);
  --white-50: rgba(255,255,255,0.5);
  --white-70: rgba(255,255,255,0.7);
  --white-80: rgba(255,255,255,0.8);

  /* Semantic tokens */
  --color-primary:        #22c55e;
  --color-surface:        rgba(255,255,255,0.05);
  --color-border:         rgba(255,255,255,0.1);
  --color-text-primary:   #fff;
  --color-text-secondary: rgba(255,255,255,0.7);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin:  0;
  padding: 0;
  height:  100%;
  font-family: 'Cairo', 'Oswald', ui-sans-serif, system-ui, sans-serif;
  background-color: var(--aikido-green);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}

button { cursor: pointer; font-family: inherit; }

[x-cloak] { display: none !important; }