/* ===========================================================================
   DIEPA × OpenCloud — Typography · Spacing · Elevation · Base
   (Hülle-Fassung: die drei kleinen Token-Dateien + Base-Reset in einer Datei;
   Inhalte unverändert aus dem Design-Projekt diepa-opencloud-design-system,
   tokens/{typography,spacing,elevation,base}.css.)
   =========================================================================== */

:root {
  /* ---- Typography -------------------------------------------------------- */
  --oc-font-family:        "Wix Madefor Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --oc-font-family-bold:   "Wix Madefor Text Bold", "Wix Madefor Text", system-ui, sans-serif;
  --oc-font-family-mono:   ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --oc-font-weight-regular:   400;
  --oc-font-weight-medium:    500;
  --oc-font-weight-semibold:  600;
  --oc-font-weight-bold:      700;

  --oc-font-size-display-l:   3rem;
  --oc-font-size-display:     2.5rem;
  --oc-font-size-h1:          2rem;
  --oc-font-size-h2:          1.625rem;
  --oc-font-size-h3:          1.3125rem;
  --oc-font-size-h4:          1.125rem;
  --oc-font-size-large:       1.0625rem;
  --oc-font-size-default:     0.9375rem;
  --oc-font-size-small:       0.8125rem;
  --oc-font-size-caption:     0.75rem;

  --oc-line-height-tight:     1.15;
  --oc-line-height-heading:   1.25;
  --oc-line-height-default:   1.55;
  --oc-line-height-relaxed:   1.7;

  --oc-letter-spacing-tight:  -0.02em;
  --oc-letter-spacing-normal: 0;
  --oc-letter-spacing-wide:   0.04em;

  /* ---- Spacing / radii / sizing (4px grid) ------------------------------- */
  --oc-space-xsmall:   0.25rem;
  --oc-space-small:    0.5rem;
  --oc-space-smedium:  0.75rem;
  --oc-space-medium:   1rem;
  --oc-space-large:    1.5rem;
  --oc-space-xlarge:   2rem;
  --oc-space-xxlarge:  3rem;
  --oc-space-xxxlarge: 4rem;

  --oc-radius-xs:    4px;
  --oc-radius-s:     6px;
  --oc-radius-m:     8px;
  --oc-radius-l:     12px;
  --oc-radius-xl:    16px;
  --oc-radius-pill:  9999px;
  --oc-radius-round: 50%;

  --oc-size-control-s:   28px;
  --oc-size-control-m:   36px;
  --oc-size-control-l:   44px;
  --oc-size-icon-s:      16px;
  --oc-size-icon-m:      20px;
  --oc-size-icon-l:      24px;

  --oc-size-sidebar:        260px;
  --oc-size-rightpanel:     320px;
  --oc-size-topbar:         56px;
  --oc-border-width:        1px;
  --oc-border-width-strong: 2px;

  --oc-focus-ring-width:   2px;
  --oc-focus-ring-offset:  2px;

  /* ---- Elevation (navy-tinted), motion, z ladder ------------------------- */
  --oc-shadow-0: none;
  --oc-shadow-1: 0 1px 2px rgba(0, 36, 84, 0.06), 0 1px 3px rgba(0, 36, 84, 0.08);
  --oc-shadow-2: 0 2px 6px rgba(0, 36, 84, 0.07), 0 4px 12px rgba(0, 36, 84, 0.09);
  --oc-shadow-3: 0 6px 16px rgba(0, 36, 84, 0.10), 0 12px 32px rgba(0, 36, 84, 0.12);
  --oc-shadow-4: 0 12px 28px rgba(0, 36, 84, 0.14), 0 24px 56px rgba(0, 36, 84, 0.16);
  --oc-shadow-inset: inset 0 1px 2px rgba(0, 36, 84, 0.10);

  --oc-duration-fast:    120ms;
  --oc-duration-default: 200ms;
  --oc-duration-slow:    320ms;
  --oc-ease-standard:  cubic-bezier(0.2, 0, 0, 1);
  --oc-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.02);
  --oc-ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --oc-ease-in:        cubic-bezier(0.4, 0, 1, 1);

  --oc-z-base:      0;
  --oc-z-sticky:    100;
  --oc-z-drawer:    200;
  --oc-z-overlay:   300;
  --oc-z-modal:     400;
  --oc-z-toast:     500;
  --oc-z-tooltip:   600;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--oc-font-family);
  font-size: var(--oc-font-size-default);
  line-height: var(--oc-line-height-default);
  font-weight: var(--oc-font-weight-regular);
  color: var(--oc-role-on-surface);
  background-color: var(--oc-role-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--oc-font-weight-bold);
  line-height: var(--oc-line-height-heading);
  color: var(--oc-role-on-surface);
  letter-spacing: var(--oc-letter-spacing-tight);
}

p { margin: 0; }

button, input, select, optgroup, textarea {
  color: inherit;
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
}

a {
  color: var(--oc-role-primary);
  text-decoration-color: color-mix(in srgb, var(--oc-role-primary) 40%, transparent);
  text-underline-offset: 2px;
}
a:hover { color: var(--oc-role-primary-hover); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--oc-focus-ring-width) solid var(--oc-role-focus);
  outline-offset: var(--oc-focus-ring-offset);
  border-radius: var(--oc-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Type helper classes -------------------------------------------------- */
.oc-display-l { font-size: var(--oc-font-size-display-l); font-weight: 700; line-height: var(--oc-line-height-tight); letter-spacing: var(--oc-letter-spacing-tight); }
.oc-display   { font-size: var(--oc-font-size-display);   font-weight: 700; line-height: var(--oc-line-height-tight); letter-spacing: var(--oc-letter-spacing-tight); }
.oc-h1 { font-size: var(--oc-font-size-h1); font-weight: 700; line-height: var(--oc-line-height-heading); }
.oc-h2 { font-size: var(--oc-font-size-h2); font-weight: 700; line-height: var(--oc-line-height-heading); }
.oc-h3 { font-size: var(--oc-font-size-h3); font-weight: 600; line-height: var(--oc-line-height-heading); }
.oc-h4 { font-size: var(--oc-font-size-h4); font-weight: 600; line-height: var(--oc-line-height-heading); }
.oc-body-l { font-size: var(--oc-font-size-large);   font-weight: 400; line-height: var(--oc-line-height-default); }
.oc-body   { font-size: var(--oc-font-size-default); font-weight: 400; line-height: var(--oc-line-height-default); }
.oc-small  { font-size: var(--oc-font-size-small);   font-weight: 400; line-height: var(--oc-line-height-default); }
.oc-caption{ font-size: var(--oc-font-size-caption); font-weight: 400; line-height: var(--oc-line-height-default); }
.oc-eyebrow{
  font-size: var(--oc-font-size-caption);
  font-weight: 700;
  letter-spacing: var(--oc-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--oc-role-on-surface-variant);
}
.oc-muted { color: var(--oc-role-on-surface-variant); }