/* Red Mammoth — the single source of design tokens for the public site and
   the panel. Load after fonts.css and before site.css / panel.css.

   Brand names (--navy, --ivory, ...) are canonical. The old --color-*
   names further down are aliases kept so every existing rule renders
   unchanged; remove an alias only after every page that uses it has
   been migrated. */

:root {
  /* ---- Brand palette ---- */
  --navy: #14213D;
  --ivory: #F6F2E8;
  --oxblood: #6E1D26;
  --oxblood-dark: #5A1720;
  --gold: #C4A35A;
  --graphite: #23262B;
  --slate: #6E7A8A;

  /* ---- Typography ---- */
  --font-body: 'Vazirmatn', 'Inter', system-ui, sans-serif;
  --font-heading: 'Noto Naskh Arabic', 'Lora', Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 19px;
  --text-xl: clamp(22px, 2.6vw, 28px);
  --text-2xl: clamp(28px, 4vw, 40px);
  --leading-body: 1.8;
  --leading-heading: 1.32;

  /* ---- Spacing (4px base) ---- */
  --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;

  /* ---- Shape, focus, touch ---- */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-modal: 16px; /* ui-redesign step 3 -- .tl-modal and .terms-modal had both already converged on this value independently; promoted to a token so neither has to repeat the literal */
  --radius-lg: 20px;
  --radius-pill: 999px;
  --focus-ring: 0 0 0 3px var(--gold);
  --focus-ring-offset: 2px;
  --tap-target: 44px;

  /* ---- Soft border + hover (ui-redesign step 1) ---- cards, inputs and buttons used a hard solid gold
     border everywhere; this is the one shared replacement -- translucent at rest, solid gold plus a small
     lift and a plain neutral shadow on hover. No glow, no gradient on the border: this is a financial
     product, not a game. Applied through shared classes (.card-box, .btn-outline, panel .pcard/.dash-card,
     form inputs), never redeclared per page. Decorative/non-interactive elements (images, pills, dropdown
     panels) use --border-soft but never --shadow-hover/--lift-hover. */
  --border-soft: 1px solid rgba(196, 163, 90, .3);
  --shadow-hover: 0 14px 28px -8px rgba(0, 0, 0, .35);
  --lift-hover: -3px;

  /* ---- Motion + elevation (ui-redesign step 2 -- interaction language) ---- one timing/easing/shadow
     vocabulary for every button, input, modal, toast and skeleton from here on; never redeclared per
     page. Durations: 150-300ms for a hover/press/focus micro-interaction, up to 600ms for an entrance
     (a modal or toast arriving). Only transform/opacity/box-shadow/border-color are ever animated --
     never a layout property -- so motion stays cheap and never causes reflow. */
  --duration-fast: 160ms;
  --duration-base: 220ms;
  --duration-slow: 480ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);

  /* resting elevation for a solid button; cards keep --shadow-hover above for their own hover lift */
  --shadow-button: 0 10px 20px -10px rgba(0, 0, 0, .4);
  --shadow-modal: 0 40px 80px -30px rgba(0, 0, 0, .6);
  --lift-btn: -2px;

  /* panel's filled inputs (profile, tools, registration) get a soft glow instead of cards' hard lift --
     a translucent gold halo that grows in on focus. --focus-ring-rest is the zero-spread starting point
     so the ring can transition (expand), not just appear. */
  --focus-glow: 0 0 0 4px rgba(196, 163, 90, .22);
  --focus-ring-rest: 0 0 0 0 rgba(196, 163, 90, 0);

  /* skeleton shimmer -- built from the existing navy/ivory shades, no new hue */
  --skeleton-base: var(--color-navy-light);
  --skeleton-highlight: rgba(246, 242, 232, .08);

  --container: 1240px;

  /* ---- Status (panel) ---- */
  --good: #2E9E63;
  --bad: #D9534F;

  /* ---- Plan colours. Names match color_token in app/plans_config.py;
     values are the approved ones. Components never write these hex values
     directly. ---- */
  --plan-free: #9CA3AF;
  --plan-iran: #10B981;
  --plan-basic: #3B82F6;
  --plan-silver: #C0C0C0;
  --plan-gold: #D4AF37;
  --plan-diamond: #7DD3FC;

  /* ---- Legacy aliases (do not use in new rules) ---- */
  --color-navy: var(--navy);
  --color-navy-light: #1A2A47;
  --color-navy-dark: #101B33;
  --color-oxblood: var(--oxblood);
  --color-oxblood-dark: var(--oxblood-dark);
  --color-oxblood-deep: #3E1A28;
  --color-gold: var(--gold);
  --color-gold-tint: rgba(196, 163, 90, .16);
  --color-cream: var(--ivory);
  --color-slate: var(--slate);
  --color-slate-light: #A7B0BE;
  --color-muted-link: #DDD7C8;
  --color-footer-body: #B9C1CE;

  /* ivory at the exact opacities used throughout the site */
  --text-70: rgba(246, 242, 232, .7);
  --text-75: rgba(246, 242, 232, .75);
  --text-82: rgba(246, 242, 232, .82);
  --text-85: rgba(246, 242, 232, .85);
}