/* sw-core-child/assets/css/tokens.css */

:root{
  /* =========================================================
     COLORS (Brand + Semantic)
  ========================================================= */
  --c-orange: #ffac0b;
  --c-orange-50: rgba(255, 172, 11, 0.85);
  --c-gray: #343434;
  --c-red: #d62d20;
  --c-green: #008744;
  --c-blue: #0057e7;
  --c-white: #ffffff;
  --c-black: #000000;

  /* Semantic */
  --color-bg: var(--c-white);
  --color-surface: var(--c-white);
  --color-text: var(--c-gray);
  --color-heading: var(--c-gray);
  --color-muted: rgba(52, 52, 52, 0.75);

  --color-primary: var(--c-orange);
  --color-primary-contrast: var(--c-white);

  --color-link: var(--c-orange);
  --color-link-hover: color-mix(in srgb, var(--c-orange) 100%, var(--c-black));
  --color-link-visited: color-mix(in srgb, var(--c-orange) 100%, var(--c-gray));
  --color-focus: var(--c-orange-50);

  --color-border: rgba(52, 52, 52, 0.18);
  --color-shadow: rgba(0, 0, 0, 0.10);

  /* =========================================================
     TYPOGRAPHY (Fonts)
     -> austauschbar, ohne restliches CSS anzufassen
  ========================================================= */
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-heading: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Optional: Canva Fonts als Token, falls du sie irgendwann einsetzt */
  --font-canva-heading: "Squada One", var(--font-heading);
  --font-canva-body: var(--font-body);

  /* =========================================================
     TYPE SCALE (Responsive: Mobile -> Desktop)
     clamp(min, fluid, max)
     Basis: 1rem = Browser-Default (meist 16px)
  ========================================================= */
  /* Body & UI */
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);       /* 16 -> 17 */
  --fs-body-lg: clamp(1.0625rem, 1.01rem + 0.25vw, 1.125rem);/* 17 -> 18 */
  --fs-small: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);  /* 14 -> 15 */
  --fs-meta: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);   /* 13 -> 14 */
  --fs-ui: clamp(0.9375rem, 0.91rem + 0.15vw, 1rem);         /* 15 -> 16 */

  /* Widgets */
  --fs-widget-title: clamp(1.0625rem, 1.01rem + 0.25vw, 1.1875rem); /* 17 -> 19 */
  --fs-widget-text: var(--fs-body);

  /* Headings H1–H6 — sehr kompakt, UI/SaaS-Level */

  --fs-h1: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);   /* ~21 → 27 */
  --fs-h2: clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem); /* ~19 → 24 */
  --fs-h3: clamp(1.12rem, 1rem + 0.4vw, 1.32rem);   /* ~18 → 21 */
  --fs-h4: clamp(1.04rem, 0.98rem + 0.25vw, 1.16rem); /* ~16.5 → 18.5 */
  --fs-h5: clamp(0.98rem, 0.94rem + 0.18vw, 1.06rem); /* ~15.7 → 17 */
  --fs-h6: clamp(0.92rem, 0.9rem + 0.12vw, 0.98rem);  /* ~14.7 → 16 */

  /* =========================================================
     LINE HEIGHT / LETTER SPACING
  ========================================================= */
  --lh-tight: 1.15;
  --lh-heading: 1.2;
  --lh-body: 1.6;
  --lh-loose: 1.75;

  --ls-tight: -0.015em;
  --ls-normal: 0;
  --ls-wide: 0.02em;

  /* =========================================================
     FONT WEIGHTS
  ========================================================= */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Heading weights (separat steuerbar) */
  --fw-h1: 700;
  --fw-h2: 700;
  --fw-h3: 600;
  --fw-h4: 600;
  --fw-h5: 600;
  --fw-h6: 600;

  /* =========================================================
     LINKS (Style Tokens)
  ========================================================= */
  --link-decoration: none;
  --link-decoration-thickness: 0.08em;
  --link-underline-offset: 0.18em;
  --link-hover-decoration: none;

  /* =========================================================
     SPACING (4px Raster in rem)
  ========================================================= */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;
  --sp-9: 3rem;
  --sp-10: 4rem;

  /* =========================================================
     RADIUS / SHADOW / BORDERS
  ========================================================= */
  --radius-1: 0.25rem;
  --radius-2: 0.375rem; /* ~6px */
  --radius-3: 0.5rem;   /* ~8px */
  --radius-4: 0.75rem;
  --radius-pill: 999rem;

  --border-1: 0.125rem; /* 2px in rem */
  --shadow-1: 0 0.375rem 1.125rem var(--color-shadow);

  /* =========================================================
     BUTTONS (rem/em basiert)
  ========================================================= */
  --btn-font-family: var(--font-body);
  --btn-font-size: clamp(1rem, 0.97rem + 0.15vw, 1.125rem); /* 16 -> 18 */
  --btn-font-weight: var(--fw-medium);
  --btn-line-height: 1.2;

  --btn-radius: var(--radius-2);
  --btn-border-width: var(--border-1);

  --btn-pad-y: 0.625rem; /* ~10px */
  --btn-pad-x: 2.25em;   /* ~40px @ 18px, skaliert mit Font */

  --btn-bg: var(--color-primary);
  --btn-text: var(--color-primary-contrast);
  --btn-border: var(--color-primary-contrast);

  --btn-bg-hover: var(--c-white);
  --btn-text-hover: var(--color-primary);
  --btn-border-hover: var(--color-primary);

  /* Button shadow (global) */
  --btn-shadow: var(--shadow-1);
  --btn-shadow-hover: var(--shadow-1);

  --focus-ring: 0 0 0 0.25rem var(--color-focus);

  /* =========================================================
     LAYOUT (Container)
  ========================================================= */
  --container-max: 72rem;     /* ~1152px */
  --container-pad: var(--sp-6);
}