/* =============================================================================
   ONLINE SOLUTION - Corporate Identity & Design System
   Canonical design tokens · v2.0.0  (inherited verbatim - DO NOT fork brand values)

   This is the corporate single source of truth. SecureCommerce inherits it and
   overrides ONLY the brand hue in securecommerce-theme.css. Keep this file in
   sync with the corporate design system; never edit brand values here locally.
   ========================================================================== */

:root {

  /* --- Brand blue ramp (corporate identity) ------------------------------- */
  --os-blue-50:  #F3F8FC;
  --os-blue-100: #E7F1F8;
  --os-blue-200: #C2E0F5;
  --os-blue-300: #8FC8EC;
  --os-blue-400: #58AEE2;
  --os-blue-500: #1C93D8;
  --os-blue-600: #1580BD;   /* ▲ CORPORATE BRAND BLUE */
  --os-blue-700: #0E699A;
  --os-blue-800: #0B4E74;
  --os-blue-900: #08324C;

  /* Semantic brand aliases (product work uses these, not the raw ramp) */
  --os-brand:              var(--os-blue-600);
  --os-brand-interactive:  var(--os-blue-700);
  --os-brand-deep:         var(--os-blue-800);
  --os-brand-bright:       var(--os-blue-500);

  --os-brand-blue:             var(--os-blue-600);
  --os-brand-blue-interactive: var(--os-blue-700);
  --os-brand-blue-deep:        var(--os-blue-800);
  --os-aix-blue:               var(--os-blue-500);

  /* --- Neutral / gray ramp ------------------------------------------------ */
  --os-gray-50:  #F6F8FA;
  --os-gray-100: #EEF1F4;
  --os-gray-200: #DDE2E7;
  --os-gray-300: #C2C9D0;
  --os-gray-400: #8A929B;
  --os-gray-500: #606060;
  --os-gray-600: #4A5560;
  --os-gray-700: #333B45;
  --os-brand-gray: var(--os-gray-500);

  /* --- Ink (brand dark) --------------------------------------------------- */
  --os-ink:      #0C1826;
  --os-ink-soft: #16212E;
  --os-dark:     var(--os-ink);
  --os-black:    #000000;

  /* --- Surfaces ----------------------------------------------------------- */
  --os-canvas:        #FCFCFD;
  --os-surface:       #FFFFFF;
  --os-surface-muted: #F2F5F8;

  /* --- Text --------------------------------------------------------------- */
  --os-text-primary: #16212E;
  --os-text-body:    #4A5560;
  --os-text-muted:   #8A929B;
  --os-text-inverse: #FFFFFF;
  --os-link:         var(--os-brand-interactive);

  /* --- Borders ------------------------------------------------------------ */
  --os-border:          #E4E8EC;
  --os-border-strong:   #C2C9D0;
  --os-border-document: #000000;

  --os-doc-table-header: #2889C4;

  /* --- Functional (status) ------------------------------------------------ */
  --os-info:    var(--os-brand);
  --os-success: #1E7A34;
  --os-warning: #B26A00;
  --os-error:   #C0392B;

  /* --- Typography --------------------------------------------------------- */
  --os-font-primary:   "Roboto", Arial, Tahoma, "Helvetica Neue", sans-serif;
  --os-font-secondary: "Lora", Georgia, "Times New Roman", serif;
  --os-font-mono:      "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;

  --os-weight-light:   300;
  --os-weight-regular: 400;
  --os-weight-medium:  500;
  --os-weight-bold:    700;

  --os-fs-display: 44px;   --os-lh-display: 1.1;
  --os-fs-h1:      34px;   --os-lh-h1:      1.15;
  --os-fs-h2:      26px;   --os-lh-h2:      1.25;
  --os-fs-h3:      21px;   --os-lh-h3:      1.3;
  --os-fs-h4:      18px;   --os-lh-h4:      1.35;
  --os-fs-body-lg: 16px;   --os-lh-body-lg: 1.6;
  --os-fs-body:    15px;   --os-lh-body:    1.7;
  --os-fs-small:   13px;   --os-lh-small:   1.5;
  --os-fs-caption: 12px;   --os-lh-caption: 1.4;
  --os-tracking-eyebrow: 0.08em;

  /* --- Space · Layout · Shape · Motion ------------------------------------ */
  --os-space-1: 4px;   --os-space-2: 8px;   --os-space-3: 12px;  --os-space-4: 16px;
  --os-space-5: 20px;  --os-space-6: 24px;  --os-space-8: 32px;  --os-space-10: 40px;
  --os-space-12: 48px; --os-space-14: 56px; --os-space-16: 64px; --os-space-20: 80px;
  --os-space-30: 120px; --os-space-38: 150px;

  --os-container-max:     1220px;
  --os-container-wrapper: 1240px;
  --os-section-y:         64px;
  --os-grid-cols:         12;
  --os-gutter:            24px;

  --os-radius-none: 0;
  --os-radius-sm:   3px;
  --os-radius-md:   5px;
  --os-radius-lg:   8px;
  --os-radius-pill: 9999px;

  --os-shadow-sm:   0 1px 3px rgba(12,24,38,0.08);
  --os-shadow-md:   0 4px 12px rgba(12,24,38,0.10);
  --os-shadow-lg:   0 12px 28px rgba(12,24,38,0.12);
  --os-shadow-ring: inset 0 0 0 1px rgba(12,24,38,0.05);

  --os-duration-fast: 120ms;
  --os-duration-base: 200ms;
  --os-duration-slow: 320ms;
  --os-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* =============================================================================
   HELPER CLASSES - optional corporate primitives.
   ========================================================================== */
.os-container { width: 100%; max-width: var(--os-container-max); margin-inline: auto; padding-inline: var(--os-space-6); }

.os-btn { display: inline-flex; align-items: center; gap: var(--os-space-2); font-family: var(--os-font-primary); font-weight: var(--os-weight-medium); font-size: var(--os-fs-body); line-height: 1; padding: 12px 22px; border-radius: var(--os-radius-md); border: 1px solid transparent; cursor: pointer; transition: background var(--os-duration-base) var(--os-ease-standard), color var(--os-duration-base) var(--os-ease-standard); }
.os-btn--primary { background: var(--os-brand-interactive); color: #fff; }
.os-btn--primary:hover { background: var(--os-brand-deep); }
.os-btn--secondary { background: transparent; color: var(--os-brand-interactive); border-color: var(--os-brand-interactive); }
.os-btn--secondary:hover { background: var(--os-blue-50); }

.os-link { color: var(--os-link); text-decoration: underline; text-underline-offset: 2px; }
.os-link:hover { color: var(--os-brand-deep); }

.os-card { background: var(--os-surface); border: 1px solid var(--os-border); border-radius: var(--os-radius-md); box-shadow: var(--os-shadow-sm); padding: var(--os-space-6); }

.os-medallion { display: grid; place-items: center; width: 96px; height: 96px; border-radius: var(--os-radius-pill); background: var(--os-surface); box-shadow: var(--os-shadow-ring), var(--os-shadow-sm); color: var(--os-brand); border: 1px solid var(--os-border); }

.os-input { font-family: var(--os-font-primary); font-size: var(--os-fs-body); color: var(--os-text-primary); background: var(--os-surface); border: 1px solid var(--os-border-strong); border-radius: var(--os-radius-md); padding: 10px 12px; }
.os-input:focus { outline: none; border-color: var(--os-brand); box-shadow: 0 0 0 3px rgba(21,128,189,0.20); }