/* ============================================================
   Cashbox Global — Brand stylesheet
   Compiled from the Cashbox Global Design System (claude.ai/design),
   itself sourced from the Cashbox Brand Book V3/V4.
   Source of truth: the design-system project — re-sync from there,
   don't hand-edit values here.
   Sections: fonts → colors → typography → layout → base styles
   ============================================================ */

/* ------------------------------------------------------------
   Webfonts
   Brand typefaces: Museo Sans / Museo Sans Rounded (commercial,
   not on Google Fonts). Digital substitutes per the design system:
     • Open Sans   — exact brand digital typeface
     • Quicksand   — free stand-in for Museo Sans Rounded (display)
     • Roboto Mono — monospace
   Drop in licensed Museo Sans webfonts to make display pixel-exact.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Quicksand:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap');

/* ------------------------------------------------------------
   Color tokens
   ------------------------------------------------------------ */
:root {
  /* ---- Brand core (exact brand-book hexes) ---- */
  --cbg-blue:     #00354e; /* "CB BLUE" / Cashbox Blue — deepest, the brand blue */
  --cbg-blue-02:  #004563; /* primary blue — headings, primary actions */
  --cbg-blue-03:  #005578;
  --cbg-blue-04:  #00628b;
  --cbg-sky:      #3597b3; /* "SKY 01" — secondary, links, accents */
  --cbg-sky-02:   #5ba3bd;
  --cbg-sky-03:   #79bad5;
  --cbg-lime:     #95c11f; /* "BURNT LIME" — primary green accent */
  --cbg-yellow:   #dedc00; /* "LEMON YELLOW" — bright accent */
  --cbg-mango:    #f28b2d; /* "MANGO" — tertiary warm accent */
  --cbg-grey-80:  #575756; /* "GREY K80%" */
  --cbg-grey-20:  #dadada; /* "GREY K20%" */

  /* ---- Aliases kept for convenience ---- */
  --cbg-navy: var(--cbg-blue-02);
  --cbg-ink:  var(--cbg-blue);
  --cbg-teal: var(--cbg-sky);
  --cbg-green: var(--cbg-lime);

  /* ---- Blue ramp (CB Blue family) ---- */
  --blue-900: #00283b;
  --blue-800: #00354e; /* = Cashbox Blue */
  --blue-700: #004563; /* = CB Blue 02 */
  --blue-600: #005578; /* = CB Blue 03 */
  --blue-500: #00628b; /* = CB Blue 04 */
  --blue-400: #2d7ba0;
  --blue-300: #6ba3bd;
  --blue-200: #a9c8d8;
  --blue-100: #d6e6ee;
  --blue-50:  #eef5f8;

  /* ---- Sky ramp ---- */
  --sky-700: #2a7a92;
  --sky-600: #2f88a3;
  --sky-500: #3597b3; /* = Sky 01 */
  --sky-400: #5ba3bd; /* = Sky 02 */
  --sky-300: #79bad5; /* = Sky 03 */
  --sky-200: #aed3e3;
  --sky-100: #e3f0f5;

  /* ---- Burnt Lime (green) ramp ---- */
  --lime-600: #769a18;
  --lime-500: #95c11f; /* = Burnt Lime */
  --lime-400: #aecc53; /* tertiary 80% */
  --lime-300: #c5d984;
  --lime-200: #d9e6b1;
  --lime-100: #eef4d8;

  /* ---- Lemon Yellow ramp ---- */
  --yellow-500: #c4c200;
  --yellow-400: #dedc00; /* = Lemon Yellow */
  --yellow-300: #e6e44a;
  --yellow-200: #ecea83;
  --yellow-100: #f6f4c2;

  /* ---- Mango ramp ---- */
  --mango-600: #d9772a;
  --mango-500: #f28b2d; /* = Mango */
  --mango-400: #f6a558;
  --mango-300: #f9bd85;
  --mango-200: #fcd3ad;
  --mango-100: #fde8d4;

  /* ---- Neutral / grey ramp (anchored to brand greys) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f8f8;
  --neutral-100: #eef0f0;
  --neutral-200: #dadada; /* = Grey K20% */
  --neutral-300: #c2c2c1;
  --neutral-400: #9a9a99;
  --neutral-500: #757574;
  --neutral-600: #575756; /* = Grey K80% */
  --neutral-700: #444443;
  --neutral-800: #2e2e2d;
  --neutral-900: #1a1a19;

  /* ---- Functional ---- */
  --success: #95c11f;     /* Burnt Lime */
  --success-bg: #eef4d8;
  --warning: #f28b2d;     /* Mango */
  --warning-bg: #fde8d4;
  --danger:  #d64545;
  --danger-bg: #fbe6e6;
  --info:    #3597b3;     /* Sky */
  --info-bg: #e3f0f5;

  /* ---- Semantic aliases — reference these in components ---- */

  /* Text */
  --text-strong:   var(--cbg-blue);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-600);
  --text-subtle:   var(--neutral-500);
  --text-on-dark:  #ffffff;
  --text-on-dark-muted: rgba(255,255,255,0.74);
  --text-link:     var(--cbg-sky);
  --text-link-hover: var(--sky-700);
  --text-accent:   var(--cbg-blue-02);

  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-raised:  var(--neutral-0);
  --surface-dark:    var(--cbg-blue);
  --surface-dark-2:  var(--blue-900);
  --surface-brand:   var(--cbg-blue-02);
  --surface-accent-soft: var(--sky-100);

  /* Borders / lines */
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-brand:  var(--cbg-sky);
  --border-on-dark: rgba(255,255,255,0.18);

  /* Interactive — primary (Cashbox Blue) */
  --action-primary:        var(--cbg-blue-02);
  --action-primary-hover:  var(--cbg-blue);
  --action-primary-active: var(--blue-900);
  --action-primary-text:   #ffffff;

  /* Interactive — secondary / accent (Sky) */
  --action-accent:        var(--cbg-sky);
  --action-accent-hover:  var(--sky-600);
  --action-accent-active: var(--sky-700);
  --action-accent-text:   #ffffff;

  /* Focus ring */
  --focus-ring: var(--cbg-sky);

  /* Data-viz sequence */
  --viz-1: var(--cbg-blue-02);
  --viz-2: var(--cbg-sky);
  --viz-3: var(--cbg-lime);
  --viz-4: var(--cbg-mango);
  --viz-5: var(--cbg-yellow);
  --viz-6: var(--blue-300);
}

/* ------------------------------------------------------------
   Typography tokens
   ------------------------------------------------------------ */
:root {
  /* ---- Families ---- */
  --font-display: 'Museo Sans Rounded', 'Quicksand', 'Century Gothic', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SFMono-Regular', 'Roboto Mono', ui-monospace, 'Menlo', monospace;

  /* ---- Weights ---- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---- Type scale (1.250 major-third-ish, tuned) ---- */
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:  1.125rem;   /* 18px */
  --text-lg:  1.375rem;   /* 22px */
  --text-xl:  1.75rem;    /* 28px */
  --text-2xl: 2.25rem;    /* 36px */
  --text-3xl: 2.875rem;   /* 46px */
  --text-4xl: 3.75rem;    /* 60px */
  --text-5xl: 4.75rem;    /* 76px */

  /* ---- Line heights ---- */
  --leading-tight: 1.08;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;   /* wordmark-style tracking for eyebrows */
  --tracking-widest: 0.24em;  /* logo lockup tracking */

  /* ---- Semantic type roles ---- */
  --type-display-family: var(--font-display);
  --type-display-weight: var(--fw-light);
  --type-display-tracking: var(--tracking-tight);
  --type-heading-family: var(--font-display);
  --type-heading-weight: var(--fw-medium);
  --type-eyebrow-family: var(--font-display);
  --type-eyebrow-weight: var(--fw-medium);
  --type-eyebrow-tracking: var(--tracking-wider);
  --type-body-family: var(--font-body);
  --type-body-weight: var(--fw-regular);
}

/* ------------------------------------------------------------
   Spacing, radii, shadows, motion, layout tokens
   ------------------------------------------------------------ */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 4rem;     /* 64 */
  --space-10: 5rem;    /* 80 */
  --space-11: 6rem;    /* 96 */
  --space-12: 8rem;    /* 128 */

  /* ---- Radii ----
     The brand mark is sharp & faceted. UI leans crisp:
     small-to-moderate radii, never pill-soft on big surfaces. */
  --radius-none: 0;
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-2xl: 26px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-sm);

  /* ---- Shadows ---- (cool navy-tinted, restrained) */
  --shadow-xs: 0 1px 2px rgba(0, 48, 84, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 48, 84, 0.08), 0 1px 2px rgba(0, 48, 84, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 48, 84, 0.08), 0 2px 4px rgba(0, 48, 84, 0.05);
  --shadow-lg: 0 12px 28px rgba(0, 48, 84, 0.12), 0 4px 8px rgba(0, 48, 84, 0.06);
  --shadow-xl: 0 24px 56px rgba(0, 48, 84, 0.16), 0 8px 16px rgba(0, 48, 84, 0.08);
  --shadow-focus: 0 0 0 3px rgba(48, 156, 180, 0.35);

  /* ---- Motion ---- (calm, institutional; no bounce) */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1140px;
  --container-xl: 1320px;
  --gutter: var(--space-5);
}

/* ------------------------------------------------------------
   Base element styling & helpers (opt-in via this stylesheet)
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  margin: 0 0 0.4em;
  line-height: var(--leading-snug);
  font-weight: var(--fw-medium);
}
h1 { font-size: var(--text-3xl); font-weight: var(--fw-light); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); font-weight: var(--fw-light); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); }

small { font-size: var(--text-sm); }
strong { font-weight: var(--fw-bold); color: var(--text-strong); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--sky-200); color: var(--cbg-blue); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- Helper classes ---- */
.cbg-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--cbg-teal);
}
.cbg-display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}