/* ================================================================
   Szabó Art Design Tokens
   Global brand primitives and shared layout/motion values
   ================================================================ */

:root {
  /* ------------------------------------------------------------
     Brand colour primitives
     ------------------------------------------------------------ */

  --szaboartdesign-brand-navy-980: #020811;
  --szaboartdesign-brand-navy-950: #020914;
  --szaboartdesign-brand-navy-925: #020b14;
  --szaboartdesign-brand-navy-900: #061522;
  --szaboartdesign-brand-navy-875: #071827;
  --szaboartdesign-brand-navy-850: #081725;
  --szaboartdesign-brand-navy-800: #0a1d2e;

  --szaboartdesign-brand-gold-rgb: 212, 175, 85;
  --szaboartdesign-brand-gold-700: #9b7a32;
  --szaboartdesign-brand-gold-500: #d4af55;
  --szaboartdesign-brand-gold-300: #f2d58a;
  --szaboartdesign-brand-gold-100: #fff0c7;

  --szaboartdesign-brand-ivory-50: #fffdf8;
  --szaboartdesign-brand-ivory-75: #fffaf2;
  --szaboartdesign-brand-ivory-100: #fbf8f1;
  --szaboartdesign-brand-ivory-150: #f6f1e8;
  --szaboartdesign-brand-ivory-200: #f5f1e8;

  --szaboartdesign-brand-copy-dark: #3d4a56;
  --szaboartdesign-brand-copy-muted: #68737d;
  --szaboartdesign-brand-copy-light: #f7f3ec;

  /* ------------------------------------------------------------
     Compatibility aliases used by the existing dark system
     These are brand-level aliases only. Theme-specific text tokens
     stay inside dark-system.css and light-system.css.
     ------------------------------------------------------------ */

  --szaboartdesign-color-navy-deep: var(--szaboartdesign-brand-navy-950);
  --szaboartdesign-color-navy: var(--szaboartdesign-brand-navy-900);
  --szaboartdesign-color-navy-elevated: var(--szaboartdesign-brand-navy-800);

  --szaboartdesign-color-gold-rgb: var(--szaboartdesign-brand-gold-rgb);
  --szaboartdesign-color-gold: var(--szaboartdesign-brand-gold-500);
  --szaboartdesign-color-gold-light: var(--szaboartdesign-brand-gold-300);
  --szaboartdesign-color-gold-bright: var(--szaboartdesign-brand-gold-100);
  --szaboartdesign-color-gold-dark: var(--szaboartdesign-brand-gold-700);
  --szaboartdesign-color-gold-deep: var(--szaboartdesign-brand-gold-700);
  --szaboartdesign-color-gold-soft: var(--szaboartdesign-brand-gold-100);

  /* ------------------------------------------------------------
     Compatibility aliases used by the existing light system
     ------------------------------------------------------------ */

  --szaboartdesign-light-background: var(--szaboartdesign-brand-ivory-150);
  --szaboartdesign-light-background-deep: var(--szaboartdesign-brand-ivory-200);
  --szaboartdesign-light-surface: var(--szaboartdesign-brand-ivory-75);
  --szaboartdesign-light-surface-elevated: var(--szaboartdesign-brand-ivory-50);

  --szaboartdesign-light-navy: var(--szaboartdesign-brand-navy-850);
  --szaboartdesign-light-navy-elevated: var(--szaboartdesign-brand-navy-800);
  --szaboartdesign-light-copy: var(--szaboartdesign-brand-copy-dark);
  --szaboartdesign-light-copy-muted: var(--szaboartdesign-brand-copy-muted);

  --szaboartdesign-light-gold-rgb: var(--szaboartdesign-brand-gold-rgb);
  --szaboartdesign-light-gold: var(--szaboartdesign-brand-gold-500);
  --szaboartdesign-light-gold-light: var(--szaboartdesign-brand-gold-300);
  --szaboartdesign-light-gold-bright: var(--szaboartdesign-brand-gold-100);
  --szaboartdesign-light-gold-strong: var(--szaboartdesign-brand-gold-700);

  --szaboartdesign-light-border: rgba(8, 23, 37, 0.12);
  --szaboartdesign-light-border-soft: rgba(8, 23, 37, 0.075);

  /* ------------------------------------------------------------
     Layout
     ------------------------------------------------------------ */

  --szaboartdesign-container-width: 1440px;
  --szaboartdesign-container-width-wide: 1540px;
  --szaboartdesign-container-width-xl: 1680px;

  --szaboartdesign-page-gutter:
    clamp(18px, 4vw, 72px);

  --szaboartdesign-section-padding-y:
    clamp(72px, 7vw, 128px);

  --szaboartdesign-section-padding-y-compact:
    clamp(56px, 5vw, 96px);

  --szaboartdesign-section-padding-y-large:
    clamp(90px, 8vw, 150px);

  /* ------------------------------------------------------------
     Typography scales
     ------------------------------------------------------------ */

  --szaboartdesign-type-hero:
    clamp(2.65rem, 3.65vw, 4.5rem);

  --szaboartdesign-type-h2:
    clamp(2.5rem, 4.15vw, 4.35rem);

  --szaboartdesign-type-h2-compact:
    clamp(2rem, 3.45vw, 3rem);

  --szaboartdesign-type-h3:
    clamp(1.25rem, 1.65vw, 1.8rem);

  --szaboartdesign-type-card-title:
    clamp(1.12rem, 1.15vw, 1.36rem);

  --szaboartdesign-type-lead:
    clamp(1rem, 1.15vw, 1.16rem);

  --szaboartdesign-type-body:
    clamp(0.94rem, 0.92vw, 1.04rem);

  --szaboartdesign-type-small:
    clamp(0.78rem, 0.78vw, 0.92rem);

  /* ------------------------------------------------------------
     Radius
     ------------------------------------------------------------ */

  --szaboartdesign-radius-xs: 8px;
  --szaboartdesign-radius-sm: 12px;
  --szaboartdesign-radius-md: 18px;
  --szaboartdesign-radius-lg: 24px;
  --szaboartdesign-radius-xl: 34px;
  --szaboartdesign-radius-pill: 999px;

  /* ------------------------------------------------------------
     Shadows and glass surfaces
     ------------------------------------------------------------ */

  --szaboartdesign-shadow-soft:
    0 18px 46px rgba(2, 9, 20, 0.14);

  --szaboartdesign-shadow-medium:
    0 26px 70px rgba(0, 0, 0, 0.22);

  --szaboartdesign-shadow-gold-soft:
    0 0 28px rgba(var(--szaboartdesign-brand-gold-rgb), 0.14);

  --szaboartdesign-glass-dark:
    rgba(3, 13, 23, 0.70);

  --szaboartdesign-glass-light:
    rgba(255, 253, 248, 0.82);

  /* ------------------------------------------------------------
     Motion
     ------------------------------------------------------------ */

  --szaboartdesign-duration-fast: 180ms;
  --szaboartdesign-duration-medium: 280ms;
  --szaboartdesign-duration-slow: 620ms;

  --szaboartdesign-ease-standard: ease;
  --szaboartdesign-ease-premium: cubic-bezier(0.2, 0.76, 0.18, 1);

  --szaboartdesign-transition-fast:
    var(--szaboartdesign-duration-fast) var(--szaboartdesign-ease-standard);

  --szaboartdesign-transition-medium:
    var(--szaboartdesign-duration-medium) var(--szaboartdesign-ease-standard);

  --szaboartdesign-transition-premium:
    var(--szaboartdesign-duration-slow) var(--szaboartdesign-ease-premium);

  /* ------------------------------------------------------------
     Layering
     ------------------------------------------------------------ */

  --szaboartdesign-z-background: 0;
  --szaboartdesign-z-content: 2;
  --szaboartdesign-z-divider: 5;
  --szaboartdesign-z-navigation: 10;
}