/* ARC theme
   - Brand tokens: values from Figma (file VeBkHKCeor2KQDgXZEyz8W).
   - Kendo overrides: propagate brand into every Kendo component without
     needing ThemeBuilder. Consume Kendo variables in your own rules too
     so component and shell stay in sync.
   - Typography: --arc-font-display points at a free fallback until the
     Mikro licence is wired. Swap it in one line when ready. */

:root {
  /* ---------- Brand palette ---------- */
  --arc-primary:             #00a3a8;
  --arc-primary-highlight:   #008b8f;
  --arc-primary-20:          #00a3a833;

  --arc-warning:             #f24b67;
  --arc-warning-highlight:   #d4425a;
  --arc-warning-20:          #f24b6733;

  --arc-neutral:             #143e51;
  --arc-neutral-20:          #143e5133;
  --arc-neutral-05:          #143e510d;
  --arc-neutral-dimmed:      #cdd7db;

  --arc-text-neutral:        #143e51;
  --arc-text-muted:          #9fb1b8;
  --arc-text-white:          #ffffff;
  --arc-text-cool-blue:      #def2fb;
  --arc-text-brand-grey:     #a7b9bd;

  --arc-bg-dark:             #062a36;
  --arc-bg-light-grey:       #ebeff0;
  --arc-bg-white:            #ffffff;

  --arc-border-dark:         #31515c;
  --arc-border-light:        #143e5133;

  --arc-brand-pink:          #ff4aa1;

  /* ---------- Kendo variable overrides ---------- */
  --kendo-color-primary:            var(--arc-primary);
  --kendo-color-primary-hover:      var(--arc-primary-highlight);
  --kendo-color-primary-active:     var(--arc-primary-highlight);
  --kendo-color-primary-subtle:     var(--arc-primary-20);
  --kendo-color-on-primary:         var(--arc-text-white);

  --kendo-color-base:               var(--arc-bg-white);
  --kendo-color-base-hover:         var(--arc-neutral-05);
  --kendo-color-base-active:        var(--arc-neutral-20);
  --kendo-color-on-base:            var(--arc-text-neutral);

  --kendo-color-error:              var(--arc-warning);
  --kendo-color-error-hover:        var(--arc-warning-highlight);
  --kendo-color-error-subtle:       var(--arc-warning-20);
  --kendo-color-on-error:           var(--arc-text-white);

  /* ---------- Spacing scale (4-point grid, rem-based) ---------- */
  --arc-space-1:  0.25rem;  /*  4px */
  --arc-space-2:  0.5rem;   /*  8px */
  --arc-space-3:  0.75rem;  /* 12px */
  --arc-space-4:  1rem;     /* 16px */
  --arc-space-5:  1.25rem;  /* 20px */
  --arc-space-6:  1.5rem;   /* 24px */
  --arc-space-8:  2rem;     /* 32px */
  --arc-space-10: 2.5rem;   /* 40px */
  --arc-space-12: 3rem;     /* 48px */

  /* ---------- Radii ---------- */
  --arc-radius-sm: 0.25rem; /*  4px */
  --arc-radius-md: 0.5rem;  /*  8px */
  --arc-radius-lg: 1rem;    /* 16px */

  --kendo-border-radius-md: var(--arc-radius-md);

  /* ---------- Structural sizes ---------- */
  --arc-sidebar-width:           15rem;  /* 240px */
  --arc-sidebar-width-collapsed: 4rem;   /*  64px */
  --arc-sidebar-width-mobile:    16.25rem; /* 260px */
  --arc-topbar-height:           4rem;   /*  64px */
  --arc-topbar-height-mobile:    3.5rem; /*  56px */
  --arc-icon-btn-size:           2.25rem; /* 36px */

  /* ---------- Typography ---------- */
  --arc-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --arc-font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --arc-text-xs:   0.75rem;   /* 12px */
  --arc-text-sm:   0.875rem;  /* 14px */
  --arc-text-base: 1rem;      /* 16px */
  --arc-text-lg:   1.125rem;  /* 18px */
  --arc-text-xl:   1.25rem;   /* 20px */
  --arc-text-2xl:  1.5rem;    /* 24px */
  --arc-text-3xl:  2rem;      /* 32px */
  --arc-text-4xl:  2.5rem;    /* 40px */
}

html, body {
  margin: 0;
  font-family: var(--arc-font-body);
  font-size: var(--arc-text-sm);
  line-height: 1.43;
  color: var(--arc-text-neutral);
  background: var(--arc-bg-light-grey);
}

h1, h2, h3, h4 {
  margin: 0 0 var(--arc-space-6);
}
h1, h2, h3 {
  font-family: var(--arc-font-display);
  font-weight: 400;
}
h1 { font-size: var(--arc-text-4xl); line-height: 1.1; }
h2 { font-size: var(--arc-text-3xl); line-height: 1.125; }
h3 { font-size: var(--arc-text-xl);  line-height: 1.4;  margin-bottom: var(--arc-space-4); }
h4 {
  font-family: var(--arc-font-body);
  font-size: var(--arc-text-lg);
  line-height: 1.33;
  font-weight: 600;
  letter-spacing: -0.0375rem;
  margin-bottom: var(--arc-space-3);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--arc-bg-dark);
  color: var(--arc-text-white);
  padding: var(--arc-space-2) var(--arc-space-3);
  z-index: 100;
}
.skip-link:focus-visible { left: var(--arc-space-2); top: var(--arc-space-2); }