/* ============================================================
   MN-ET Design System — Colors & Type
   Marco Nimmrichter Elektro- und Veranstaltungstechnik
   "Electro-Technical Precision"
   ============================================================ */

@import url('../fonts/fonts.css');

:root {
  /* ─── Surface / canvas ─── */
  --mn-surface:                 #131313;
  --mn-surface-dim:             #131313;
  --mn-surface-bright:          #393939;
  --mn-surface-container-lowest:#0e0e0e;
  --mn-surface-container-low:   #1c1b1b;
  --mn-surface-container:       #201f1f;
  --mn-surface-container-high:  #2a2a2a;
  --mn-surface-container-highest:#353534;
  --mn-surface-variant:         #353534;
  --mn-surface-tint:             #05e604;

  --mn-background:              #131313;
  --mn-on-background:           #e5e2e1;

  /* ─── Foreground / text ─── */
  --mn-on-surface:              #e5e2e1;
  --mn-on-surface-variant:      #baccb1;
  --mn-inverse-surface:         #e5e2e1;
  --mn-inverse-on-surface:      #313030;

  /* ─── Outlines / dividers ─── */
  --mn-outline:                 #85967d;
  --mn-outline-variant:         #3c4b36;
  --mn-hairline:                #2a2a2a;

  /* ─── Primary — Electric Green ("Power-On") ─── */
  --mn-primary:                 #6eff58;
  --mn-on-primary:              #013a00;
  --mn-primary-container:       #00e501;
  --mn-on-primary-container:    #016000;
  --mn-inverse-primary:         #016e00;
  --mn-primary-fixed:           #77ff61;
  --mn-primary-fixed-dim:       #05e604;
  --mn-on-primary-fixed:        #002200;
  --mn-on-primary-fixed-variant:#015300;
  --mn-primary-glow:            0 0 0 1px rgba(110,255,88,.45),
                                0 0 24px rgba(110,255,88,.25);

  /* ─── Secondary — Steel Gray ─── */
  --mn-secondary:               #c6c6c7;
  --mn-on-secondary:            #2f3131;
  --mn-secondary-container:     #454747;
  --mn-on-secondary-container:  #b4b5b5;

  /* ─── Tertiary — Warm Steel ─── */
  --mn-tertiary:                #e1e1e1;
  --mn-on-tertiary:             #2f3131;
  --mn-tertiary-container:      #c5c5c5;
  --mn-on-tertiary-container:   #505252;

  /* ─── Status ─── */
  --mn-error:                   #ffb4ab;
  --mn-on-error:                #690005;
  --mn-error-container:         #93000a;
  --mn-on-error-container:      #ffdad6;
  --mn-warning:                 #ffc857;
  --mn-info:                    #58c9ff;

  /* ─── Type families ─── */
  --mn-font-display:            'Space Grotesk', system-ui, -apple-system, sans-serif;
  --mn-font-body:               'Inter', system-ui, -apple-system, sans-serif;
  --mn-font-mono:               'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─── Type scale ─── */
  --mn-headline-xl-size:        48px;
  --mn-headline-xl-weight:      700;
  --mn-headline-xl-lh:          1.1;
  --mn-headline-xl-tracking:    -0.02em;

  --mn-headline-lg-size:        32px;
  --mn-headline-lg-weight:      600;
  --mn-headline-lg-lh:          1.2;

  --mn-headline-md-size:        24px;
  --mn-headline-md-weight:      600;
  --mn-headline-md-lh:          1.3;

  --mn-body-lg-size:            18px;
  --mn-body-lg-weight:          400;
  --mn-body-lg-lh:              1.6;

  --mn-body-md-size:            16px;
  --mn-body-md-weight:          400;
  --mn-body-md-lh:              1.5;

  --mn-label-md-size:           14px;
  --mn-label-md-weight:         500;
  --mn-label-md-lh:             1.2;
  --mn-label-md-tracking:       0.05em;

  --mn-label-sm-size:           12px;
  --mn-label-sm-weight:         500;
  --mn-label-sm-lh:             1.2;
  --mn-label-sm-tracking:       0.08em;

  /* ─── Radius ─── */
  --mn-radius-sm:               2px;
  --mn-radius:                  4px;   /* DEFAULT */
  --mn-radius-md:               6px;
  --mn-radius-lg:               8px;
  --mn-radius-xl:               12px;
  --mn-radius-full:             9999px;

  /* ─── Spacing — 8px linear scale ─── */
  --mn-space-0:   0;
  --mn-space-1:   4px;
  --mn-space-2:   8px;
  --mn-space-3:   16px;
  --mn-space-4:   24px;
  --mn-space-5:   32px;
  --mn-space-6:   40px;
  --mn-space-7:   56px;
  --mn-space-8:   72px;
  --mn-space-9:   96px;
  --mn-gutter:    24px;
  --mn-margin:    40px;
  --mn-container-max: 1280px;

  /* ─── Elevation — tonal layers ─── */
  --mn-elev-0:   var(--mn-surface);
  --mn-elev-1:   var(--mn-surface-container-low);
  --mn-elev-2:   var(--mn-surface-container);
  --mn-elev-3:   var(--mn-surface-container-high);
  --mn-elev-4:   var(--mn-surface-container-highest);

  --mn-border-hairline: 1px solid var(--mn-outline-variant);
  --mn-border-strong:   1px solid var(--mn-outline);
  --mn-focus-ring:      0 0 0 1px var(--mn-primary), 0 0 12px rgba(110,255,88,.35);

  /* ─── Motion ─── */
  --mn-ease-standard:  cubic-bezier(0.2, 0.0, 0, 1.0);
  --mn-ease-snap:      cubic-bezier(0.4, 0.0, 0.2, 1);
  --mn-dur-fast:       120ms;
  --mn-dur:            180ms;
  --mn-dur-slow:       260ms;
}