/* ==========================================================================
   Coggno Design System — tokens
   Extracted from the "Coggno Design System" attached to the KB redesign
   canvas (_ds/coggno-design-system-092152e9/colors_and_type.css).
   Source of truth for the new help center design.
   ========================================================================== */

:root {
  /* --- brand palette ----------------------------------------------------- */
  --coggno-primary-blue:     #2964ae;
  --coggno-accent-blue:      #5794f7;
  --coggno-interactive-blue: #165dfc;
  --coggno-deep-blue:        #1660fc;
  --coggno-hero-blue:        #3c7dbd;
  --coggno-navy:             #012850;
  --coggno-navy-2:           #183d68;
  --coggno-white:            #ffffff;
  --coggno-bg-cool:          #f4f8fb;
  --coggno-light-gray:       #f4f4f4;
  --coggno-light-blue:       #edf2fe;
  --coggno-soft-blue:        #dbeafe;
  --coggno-soft-blue-2:      #e9f2ff;
  --coggno-dark-blue:        #044d80;
  --coggno-sky:              #68c5ed;
  --coggno-orange:           #fe6f00;
  --coggno-orange-bright:    #ff941d;
  --coggno-red:              #ff492c;
  --coggno-coral:            #e94747;
  --coggno-slate-line:       #9da9cc;
  --coggno-border-subtle:    #e2e5e8;
  --coggno-black:            #000000;

  /* --- text -------------------------------------------------------------- */
  --coggno-text-primary:   #1d2939;
  --coggno-text-secondary: #777e8b;
  --coggno-text-muted:     #626d7f;
  --coggno-text-gray:      #555555;
  --coggno-text-subtle:    #5d646c;
  --coggno-text-on-dark:   #ffffff;

  /* --- semantic roles ---------------------------------------------------- */
  --fg-1:           var(--coggno-text-primary);
  --fg-2:           var(--coggno-text-secondary);
  --fg-3:           var(--coggno-text-muted);
  --fg-4:           var(--coggno-text-subtle);
  --fg-on-primary:  var(--coggno-white);
  --fg-on-dark:     var(--coggno-white);
  --fg-link:        var(--coggno-primary-blue);
  --fg-link-hover:  var(--coggno-deep-blue);
  --fg-emphasis:    var(--coggno-black);

  --bg-page:        var(--coggno-white);
  --bg-surface:     var(--coggno-white);
  --bg-subtle:      var(--coggno-light-gray);
  --bg-section:     var(--coggno-bg-cool);
  --bg-section-blue:var(--coggno-light-blue);
  --bg-card-soft:   var(--coggno-soft-blue);
  --bg-primary:     var(--coggno-primary-blue);
  --bg-primary-hov: var(--coggno-deep-blue);
  --bg-dark:        var(--coggno-navy);
  --bg-footer:      var(--coggno-navy);
  --bg-sidebar:     var(--coggno-navy);

  --border-default: var(--coggno-soft-blue);
  --border-input:   #e5e7eb;
  --border-focus:   var(--coggno-primary-blue);
  --icon-primary:   var(--coggno-interactive-blue);
  --icon-secondary: var(--coggno-text-secondary);

  /* --- product blue (used for pills / links in the mockups) -------------- */
  --coggno-product-blue:       #0055a4;
  --coggno-product-blue-hover: #004587;
  --coggno-product-blue-tint:  rgba(0, 85, 164, .1);

  /* --- status ------------------------------------------------------------ */
  --status-success: #41ca65; --status-success-fg: #24a854; --status-success-bg: #e4f8dd;
  --status-warning: #e0c40a; --status-warning-fg: #a8830a; --status-warning-bg: #fff5d7;
  --status-error:   #f24822; --status-error-fg:   #d93a17; --status-error-bg:   #ffe2e1;
  --status-info:    #5794f7; --status-info-fg:    #2964ae; --status-info-bg:    #dde7f9;

  /* --- type -------------------------------------------------------------- */
  --font-primary:   'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:      'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-hero:     64px;
  --fs-display:  44px;
  --fs-h1:       37.6px;
  --fs-h2:       28px;
  --fs-section:  24px;
  --fs-subtitle: 18px;
  --fs-body:     17.8px;
  --fs-body-sm:  16px;
  --fs-meta:     14px;
  --fs-micro:    12px;
  --fs-ui-meta:  12px;

  --lh-heading: normal;
  --lh-body:    1.618;
  --lh-tight:   1.2;
  --lh-ui:      1.4;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;

  /* --- space, radius, elevation ----------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --container-max: 1200px;

  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-pill: 999px;

  --shadow-xs:    0 1px 2px rgba(29, 41, 57, .04);
  --shadow-sm:    0 1px 3px rgba(29, 41, 57, .06), 0 1px 2px rgba(29, 41, 57, .04);
  --shadow-md:    0 4px 12px rgba(29, 41, 57, .06), 0 1px 3px rgba(29, 41, 57, .04);
  --shadow-lg:    0 12px 32px rgba(29, 41, 57, .08), 0 2px 6px rgba(29, 41, 57, .04);
  --shadow-xl:    0 24px 48px rgba(29, 41, 57, .12);
  --shadow-focus: 0 0 0 4px rgba(0, 85, 164, .16);

  /* --- inputs and buttons ------------------------------------------------ */
  --input-bg:           #f5f4f7;
  --input-border-v2:    #dfdfe3;
  --input-radius-v2:    4px;
  --input-placeholder:  #929ab5;
  --btn-secondary-grad: linear-gradient(180deg, #f9f9f9 0%, #f5f5f5 100%);
  --btn-secondary-line: #dfdfe3;
  --btn-destructive:    #af4b4b;
  --btn-destructive-line: #bf6f6f;

  /* --- motion ------------------------------------------------------------ */
  --ease-out:    cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
}

/* The design system also defines a dark theme. The help center is light-only
   for now, so those overrides are deliberately not carried across. */