/* ============================================================
   KAAR CONSULT / MARKUS KAAR — Design Tokens
   colors_and_type.css
   ============================================================ */

/* -----------------------------------------------------------
   FONTS
   ----------------------------------------------------------- */
@font-face {
  font-family: 'Basier Circle';
  src: url('./fonts/BasierCircle-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Basier Circle';
  src: url('./fonts/BasierCircle-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Basier Circle';
  src: url('./fonts/BasierCircle-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Basier Circle';
  src: url('./fonts/BasierCircle-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Basier Circle';
  src: url('./fonts/BasierCircle-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Basier Circle';
  src: url('./fonts/BasierCircle-SemiBoldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
}

/* -----------------------------------------------------------
   BASE COLOR TOKENS
   ----------------------------------------------------------- */
:root {
  /* Brand palette — from official Brand Manual (Martin&Klein GmbH)
     Velvet Green:  HEX #02322E · CMYK 90/50/65/65 · Pantone 5463 U / 2217 C
     Mint Green:    HEX #8CACA0 · CMYK 50/20/38/3  · Pantone 4169 U / 4169 C
     Sunshine:      HEX #F7B240 · CMYK 1/35/80/0   · Pantone 121 U / 123 C
     Light Grey:    HEX #D9DADA · CMYK 0/0/0/25
     Graphite:      HEX #000000 · CMYK 0/0/0/95
  */
  --color-velvet-green:   #02322E;
  --color-mint-green:     #8CACA0;
  --color-sunshine:       #F7B240;
  --color-light-grey:     #D9DADA;
  --color-graphite:       #1A1A1A;
  --color-black:          #000000;
  --color-white:          #FFFFFF;

  /* Official tints: 80% / 60% / 40% / 20% steps */
  --color-velvet-green-80: oklch(from #02322E calc(l + 0.08) c h / 0.8);
  --color-velvet-green-60: color-mix(in srgb, #02322E 60%, white);
  --color-velvet-green-40: color-mix(in srgb, #02322E 40%, white);
  --color-velvet-green-20: color-mix(in srgb, #02322E 20%, white);
  --color-mint-green-80:   color-mix(in srgb, #8CACA0 80%, white);
  --color-mint-green-60:   color-mix(in srgb, #8CACA0 60%, white);
  --color-mint-green-40:   color-mix(in srgb, #8CACA0 40%, white);
  --color-mint-green-20:   color-mix(in srgb, #8CACA0 20%, white);
  --color-sunshine-80:     color-mix(in srgb, #F7B240 80%, white);
  --color-sunshine-60:     color-mix(in srgb, #F7B240 60%, white);
  --color-sunshine-40:     color-mix(in srgb, #F7B240 40%, white);
  --color-sunshine-20:     color-mix(in srgb, #F7B240 20%, white);
  --color-light-grey-80:   color-mix(in srgb, #D9DADA 80%, white);
  --color-light-grey-40:   color-mix(in srgb, #D9DADA 40%, white);
  /* Legacy aliases */
  --color-velvet-green-90: #0d3b37;
  --color-velvet-green-10: #e6edec;

  /* -----------------------------------------------------------
     SEMANTIC COLOR TOKENS
     ----------------------------------------------------------- */
  /* Foreground */
  --fg-primary:    var(--color-graphite);
  --fg-secondary:  #4A4A4A;
  --fg-muted:      #7A7A7A;
  --fg-inverse:    var(--color-white);
  --fg-accent:     var(--color-sunshine);

  /* Background */
  --bg-base:       var(--color-white);
  --bg-subtle:     #F5F5F4;
  --bg-dark:       var(--color-velvet-green);
  --bg-dark-mid:   var(--color-velvet-green-80);
  --bg-accent:     var(--color-sunshine);
  --bg-muted:      var(--color-mint-green-20);

  /* Border */
  --border-default: var(--color-light-grey);
  --border-strong:  var(--color-graphite);
  --border-brand:   var(--color-velvet-green);

  /* -----------------------------------------------------------
     TYPOGRAPHY TOKENS
     ----------------------------------------------------------- */
  --font-body:      'Basier Circle', 'Helvetica Neue', Arial, sans-serif;
  --font-display:   'Basier Circle', 'Helvetica Neue', Arial, sans-serif;

  /* Scale */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   42px;
  --text-4xl:   56px;
  --text-5xl:   72px;

  /* Weight */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;

  /* Line-height */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-caps:    0.12em;

  /* -----------------------------------------------------------
     SPACING TOKENS
     ----------------------------------------------------------- */
  --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;
  --space-24: 96px;
  --space-32: 128px;

  /* -----------------------------------------------------------
     BORDER RADIUS TOKENS
     ----------------------------------------------------------- */
  --radius-none:  0px;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-full:  9999px;

  /* -----------------------------------------------------------
     SHADOW TOKENS
     ----------------------------------------------------------- */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.12);
  --shadow-dark: 0 4px 24px rgba(2,50,46,0.18);

  /* -----------------------------------------------------------
     TRANSITION TOKENS
     ----------------------------------------------------------- */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
}

/* -----------------------------------------------------------
   SEMANTIC ELEMENT DEFAULTS
   ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-primary);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

p, .body {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

.body-lg {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
}

.body-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}

.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.caption {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

blockquote, .pullquote {
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-style: italic;
  color: var(--fg-primary);
}

a {
  color: var(--color-velvet-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover { color: var(--color-mint-green); }

strong { font-weight: var(--weight-semibold); }
em { font-style: italic; }