/* ==========================================================================
   Design tokens (single source of truth)
   -----------------------------------------------------------------------
   Every color, radius, shadow, spacing and font-size used across the
   frontend CSS files should be read from here. Other files may keep their
   own variable names for backward compatibility, but those names must
   point back to one of the tokens defined in this file (e.g.
   `--primary: var(--tb-primary);`) instead of repeating a raw value.
   This file must be loaded before every other frontend stylesheet.
   ========================================================================== */

:root {
  /* ---- Brand colors (Aflak / np37 palette) ---- */
  --tb-primary: #023078;
  --tb-primary-rgb: 2, 48, 120;
  --tb-primary-dark: #011c47;
  --tb-primary-light: #2e5aa8;
  --tb-secondary: #6B7A8C;
  --tb-secondary-rgb: 107, 122, 140;
  --tb-secondary-dark: #475569;
  --tb-secondary-soft: rgba(100, 116, 139, .14);
  --tb-accent: #fca805;
  --tb-accent-dark: #c39730;
  --tb-sale: #ef5661;
  --tb-sale-dark: #c62828;
  --tb-warning: #fec302;
  --tb-warning-dark: #c39730;
  --tb-success: #1e5c3a;

  /* ---- Neutrals / ink ---- */
  --tb-dark: #171717;
  --tb-ink: #0A2740;
  --tb-ink-soft: #003B73;
  --tb-muted: #7A8A90;
  --tb-deep-light: #94A3B8;
  --tb-white: #fff;

  /* ---- Gray scale (used for borders / secondary text) ---- */
  --tb-gray-100: #f5f6f7;
  --tb-gray-150: #faf9f7;
  --tb-gray-200: #fafafa;
  --tb-gray-300: #eee;
  --tb-gray-350: #e5e5e5;
  --tb-gray-400: #ddd;
  --tb-gray-450: #ccc;
  --tb-gray-500: #999;
  --tb-gray-600: #8a8a8a;
  --tb-gray-550: #707070;
  --tb-gray-650: #777;
  --tb-gray-700: #333;
  --tb-warning-light: #ffe6b3;
  --tb-tan-border: #e5e0d3;
  --tb-muted-alt: #8a97a0;
  --tb-icon-light: #c7d0d4;
  --tb-icon-muted: #b7c2c7;
  --tb-card-border: #d6d6d6e0;

  /* ---- Surfaces ---- */
  --tb-bg-soft: #F5F8FB;
  --tb-bg-badge: #EAF4F6;
  --tb-line: #DDE6EE;
  --tb-border: #eee;
  --tb-page-bg: #b6bbc2;

  /* ---- Radius scale ---- */
  --tb-radius-xs: 6px;
  --tb-radius-sm: 10px;
  --tb-radius: 16px;
  --tb-radius-lg: 18px;
  --tb-radius-xl: 20px;
  --tb-radius-pill: 999px;

  /* ---- Shadows ---- */
  --tb-shadow-sm: 0 4px 14px rgba(18, 34, 43, .08);
  --tb-shadow: 0 10px 30px rgba(var(--tb-primary-rgb), .10);
  --tb-shadow-hover: 0 14px 34px rgba(var(--tb-primary-rgb), .16);
  --tb-shadow-lg: 0 14px 32px rgba(var(--tb-primary-rgb), .14);

  /* ---- Standard button tokens (used by .btn in custom-bootstrap.css
     and by any custom button-like control across the frontend) ---- */
  --tb-btn-radius: 10px;
  --tb-btn-radius-sm: 8px;
  --tb-btn-radius-lg: 12px;
  --tb-btn-radius-pill: 30px;
  --tb-btn-font-weight: 700;
  --tb-btn-padding-x: 1.1rem;
  --tb-btn-padding-y: 0.5rem;
}