/* ============================================================
   Kenklin — Design Tokens
   Source of truth: DESIGN.md. Update both files together.
   ============================================================ */

:root {
	/* ----- Color: Surfaces ----- */
	--kk-surface:                       #f9f9f9;
	--kk-surface-dim:                   #dadada;
	--kk-surface-bright:                #f9f9f9;
	--kk-surface-container-lowest:      #ffffff;
	--kk-surface-container-low:         #f3f3f3;
	--kk-surface-container:             #eeeeee;
	--kk-surface-container-high:        #e8e8e8;
	--kk-surface-container-highest:     #e2e2e2;
	--kk-surface-variant:               #e2e2e2;

	--kk-on-surface:                    #1a1c1c;
	--kk-on-surface-variant:            #4c4546;
	--kk-inverse-surface:               #2f3131;
	--kk-inverse-on-surface:            #f1f1f1;

	--kk-outline:                       #7e7576;
	--kk-outline-variant:               #cfc4c5;
	--kk-surface-tint:                  #5e5e5e;

	/* Editorial hairline — used on cards, chips, accordions, table dividers. */
	--kk-hairline:                      #e5e5e5;

	/* ----- Color: Primary (black) ----- */
	--kk-primary:                       #000000;
	--kk-on-primary:                    #ffffff;
	--kk-primary-container:             #1b1b1b;
	--kk-on-primary-container:          #848484;
	--kk-inverse-primary:               #c6c6c6;

	/* ----- Color: Secondary (electric blue — sale/active accent) ----- */
	--kk-secondary:                     #0040e0;
	--kk-on-secondary:                  #ffffff;
	--kk-secondary-container:           #2e5bff;
	--kk-on-secondary-container:        #efefff;

	/* Convenience alias — "the Kenklin blue". */
	--kk-accent:                        #2e5bff;

	/* Wishlist — the one place we break monochrome for "love" red. */
	--kk-wishlist:                      #e02b3e;

	/* ----- Color: Tertiary (mirrors primary) ----- */
	--kk-tertiary:                      #000000;
	--kk-on-tertiary:                   #ffffff;
	--kk-tertiary-container:            #1b1b1b;
	--kk-on-tertiary-container:         #848484;

	/* ----- Color: Error ----- */
	--kk-error:                         #ba1a1a;
	--kk-on-error:                      #ffffff;
	--kk-error-container:               #ffdad6;
	--kk-on-error-container:            #93000a;

	/* ----- Color: Fixed scales ----- */
	--kk-primary-fixed:                 #e2e2e2;
	--kk-primary-fixed-dim:             #c6c6c6;
	--kk-on-primary-fixed:              #1b1b1b;
	--kk-on-primary-fixed-variant:      #474747;

	--kk-secondary-fixed:               #dde1ff;
	--kk-secondary-fixed-dim:           #b8c3ff;
	--kk-on-secondary-fixed:            #001356;
	--kk-on-secondary-fixed-variant:    #0035be;

	--kk-tertiary-fixed:                #e2e2e2;
	--kk-tertiary-fixed-dim:            #c6c6c6;
	--kk-on-tertiary-fixed:             #1b1b1b;
	--kk-on-tertiary-fixed-variant:     #474747;

	/* ----- Color: Background ----- */
	--kk-background:                    #f9f9f9;
	--kk-on-background:                 #1a1c1c;

	/* ----- Typography: Families ----- */
	--kk-font-display:  'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
	--kk-font-body:     'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* ----- Typography: display-lg (Bebas Neue 80/80, 0.02em) ----- */
	--kk-display-lg-size:           80px;
	--kk-display-lg-weight:         400;
	--kk-display-lg-line-height:    80px;
	--kk-display-lg-tracking:       0.02em;

	/* ----- Typography: headline-lg (Bebas Neue 48/48, 0.02em) ----- */
	--kk-headline-lg-size:          48px;
	--kk-headline-lg-weight:        400;
	--kk-headline-lg-line-height:   48px;
	--kk-headline-lg-tracking:      0.02em;

	/* ----- Typography: headline-lg-mobile (Bebas Neue 36/36) ----- */
	--kk-headline-lg-mobile-size:        36px;
	--kk-headline-lg-mobile-weight:      400;
	--kk-headline-lg-mobile-line-height: 36px;

	/* ----- Typography: headline-md (Bebas Neue 32/32) ----- */
	--kk-headline-md-size:          32px;
	--kk-headline-md-weight:        400;
	--kk-headline-md-line-height:   32px;

	/* ----- Typography: brand-label (Hanken Grotesk 11/16, 700, 0.15em) ----- */
	--kk-brand-label-size:          11px;
	--kk-brand-label-weight:        700;
	--kk-brand-label-line-height:   16px;
	--kk-brand-label-tracking:      0.15em;

	/* ----- Typography: body-lg (Hanken Grotesk 18/28, 400) ----- */
	--kk-body-lg-size:              18px;
	--kk-body-lg-weight:            400;
	--kk-body-lg-line-height:       28px;

	/* ----- Typography: body-md (Hanken Grotesk 15/24, 400) ----- */
	--kk-body-md-size:              15px;
	--kk-body-md-weight:            400;
	--kk-body-md-line-height:       24px;

	/* ----- Typography: label-md (Hanken Grotesk 13/18, 500, 0.01em) ----- */
	--kk-label-md-size:             13px;
	--kk-label-md-weight:           500;
	--kk-label-md-line-height:      18px;
	--kk-label-md-tracking:         0.01em;

	/* ----- Typography: button (Hanken Grotesk 14/20, 600, 0.05em) ----- */
	--kk-button-size:               14px;
	--kk-button-weight:             600;
	--kk-button-line-height:        20px;
	--kk-button-tracking:           0.05em;

	/* ----- Spacing scale (8px base) ----- */
	--kk-space-unit:    8px;
	--kk-space-1:        8px;
	--kk-space-2:       16px;
	--kk-space-3:       24px;
	--kk-space-4:       32px;
	--kk-space-5:       40px;
	--kk-space-6:       48px;
	--kk-space-7:       56px;
	--kk-space-8:       64px;
	--kk-space-10:      80px;
	--kk-space-12:      96px;

	/* ----- Layout ----- */
	--kk-container-margin-desktop:  64px;
	--kk-container-margin-mobile:   20px;
	--kk-gutter:                    16px;
	--kk-section-gap:               80px;

	/* ----- Shape (no rounding anywhere) ----- */
	--kk-radius: 0;

	/* ----- Borders ----- */
	--kk-border-width:  1px;
	--kk-border-color:  var(--kk-hairline);

	/* ----- Touch targets (mobile WCAG min) ----- */
	--kk-touch-target: 44px;

	/* ----- Motion ----- */
	--kk-transition-fast:   120ms ease;
	--kk-transition-base:   200ms ease;
	--kk-transition-slow:   320ms ease;

	/* ----- Z-index scale ----- */
	--kk-z-base:        1;
	--kk-z-sticky:      100;
	--kk-z-header:      200;
	--kk-z-drawer:      300;
	--kk-z-modal:       400;
	--kk-z-toast:       500;
}