/* Kano Kimonos — drop-in tokens + base. Single file, no build step.
   Futura/Futura Condensed are substituted with Jost/Oswald (no licensed binaries).
   Swap in real @font-face rules for Futura when available. */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Oswald:wght@500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

:root {
  /* Primary — black & white ARE the palette */
  --black: #000000;
  --white: #ffffff;
  --ink: #2c2e35;          /* logo artwork charcoal — use instead of pure black for type */
  --paper: #f7f6f3;        /* warm off-white alt section */

  --gray-700: #4c4f58;
  --gray-500: #7d8089;
  --gray-300: #c3c5ca;
  --gray-200: #dcdde0;     /* hairline rules */
  --gray-100: #eeeef0;

  /* Secondary — small details & graphics ONLY, one pillar per context.
     Never a large field of secondary color. */
  --brand-red: #d82838;
  --brand-red-deep: #901820;   /* hover */
  --athletes-green: #209060;
  --events-amber: #e8a028;
  --academies-teal: #009870;
  --recognitions-orange: #e07040;

  /* Semantic */
  --text-primary: var(--ink);
  --text-secondary: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-inverse: var(--white);
  --surface-page: var(--white);
  --surface-alt: var(--paper);
  --surface-dark: var(--ink);
  --border-default: var(--gray-200);
  --border-strong: var(--ink);
  --accent: var(--brand-red);
  --accent-hover: var(--brand-red-deep);
  --focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--ink);

  /* Type */
  --font-display: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --font-condensed: 'Oswald', 'Roboto Condensed', sans-serif;
  --font-body: 'Roboto', 'Helvetica Neue', sans-serif;

  --text-xs: 12px;  --text-sm: 14px;  --text-base: 16px; --text-lg: 20px;
  --text-xl: 26px;  --text-2xl: 34px; --text-3xl: 46px;  --text-4xl: 64px;

  --tracking-caps: 0.08em;
  --tracking-wide: 0.28em;   /* the "K I M O N O S" motif */
  --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.55;

  /* Space */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* Geometry — square by default */
  --radius-none: 0;
  --radius-sm: 2px;          /* form fields only */
  --radius-pill: 999px;      /* belt-stripe tags only */
  --border-hairline: 1px solid var(--border-default);
  --border-rule: 2px solid var(--ink);

  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(44, 46, 53, 0.08);
  --shadow-overlay: 0 12px 32px rgba(44, 46, 53, 0.22);

  --ease-brand: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gray-300); }
a:hover { color: var(--black); border-bottom-color: var(--ink); }

/* Eyebrow / wide-tracked caps label — the signature brand device */
.kk-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* Buttons — square, caps, tracked */
.kk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--space-6);
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  border: 2px solid var(--ink); border-radius: var(--radius-none);
  background: var(--ink); color: var(--white); cursor: pointer;
  transition: background var(--duration-base) var(--ease-brand),
              color var(--duration-base) var(--ease-brand);
}
.kk-btn:hover { background: var(--black); border-color: var(--black); }
.kk-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kk-btn--secondary { background: transparent; color: var(--ink); }
.kk-btn--secondary:hover { background: var(--ink); color: var(--white); }
.kk-btn--accent { background: var(--accent); border-color: var(--accent); }
.kk-btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Card — white, hairline, square, no shadow */
.kk-card {
  background: var(--white);
  border: var(--border-hairline);
  border-radius: var(--radius-none);
  padding: var(--space-5);
}

/* Form field — the only place 2px radius is allowed */
.kk-input {
  width: 100%; min-height: 44px; padding: 0 var(--space-3);
  font-family: var(--font-body); font-size: var(--text-base); color: var(--ink);
  background: var(--white); border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-base) var(--ease-brand);
}
.kk-input:focus { outline: none; border-color: var(--ink); }

/* Section separator */
.kk-rule { height: 0; border: 0; border-top: var(--border-rule); margin: var(--space-8) 0; }
.kk-hairline { height: 0; border: 0; border-top: var(--border-hairline); }