/* =========================================================================
   Dreamz TCG — Design Tokens
   ========================================================================= */

/* Montserrat — je eine @font-face pro Weight (statische Files, kein Variable-Font).
   So bekommt der Browser echte Fettschnitte statt synthetisch nachgezogene 400er. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/Montserrat-400.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/Montserrat-500.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/Montserrat-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/Montserrat-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 800; src: url('../fonts/Montserrat-800.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 900; src: url('../fonts/Montserrat-900.woff2') format('woff2'); }

@font-face { font-family: 'Allura'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/Allura-Regular.woff2') format('woff2'); }

:root {
  /* Brand */
  --brand-turquoise:        #00D1C2;
  --brand-turquoise-alt:    #00C4D1;
  --brand-turquoise-hover:  #14E3D4;
  --brand-turquoise-press:  #00A89C;
  --brand-turquoise-dim:    rgba(0, 209, 194, 0.12);
  --brand-turquoise-glow:   rgba(0, 209, 194, 0.35);

  /* Button-Gradient: dunkel → hell, edler Look statt greller Volltonfläche */
  --btn-gradient:            linear-gradient(180deg, #0BB5A7 0%, #058074 100%);
  --btn-gradient-hover:      linear-gradient(180deg, #14C4B6 0%, #078F82 100%);
  --btn-gradient-shadow:     0 4px 12px rgba(0, 168, 156, 0.25), inset 0 1px 0 rgba(255,255,255,0.12);
  --btn-gradient-shadow-hover: 0 6px 20px rgba(0, 209, 194, 0.35), inset 0 1px 0 rgba(255,255,255,0.15);

  /* Ink scale */
  --ink-void: #0B0B0D;
  --ink-900:  #101014;
  --ink-800:  #16171C;
  --ink-700:  #1A1A1E;
  --ink-600:  #24252B;
  --ink-500:  #2E2F36;
  --ink-400:  #3A3A3F;
  --ink-300:  #55565D;
  --ink-200:  #8A8B92;
  --ink-100:  #C6C6CC;
  --ink-050:  #F7F7F7;

  /* Semantic surfaces */
  --bg-canvas:   var(--ink-900);
  --bg-surface:  var(--ink-800);
  --bg-card:     var(--ink-700);
  --bg-raised:   var(--ink-600);
  --bg-overlay:  rgba(11,11,13,0.72);

  /* Foreground */
  --fg-1: #F7F7F7;
  --fg-2: #C6C6CC;
  --fg-3: #8A8B92;
  --fg-4: #55565D;

  /* Borders */
  --border-default:    #3A3A3F;
  --border-hairline:   rgba(255,255,255,0.06);
  --border-accent:     var(--brand-turquoise);
  --border-accent-dim: rgba(0,209,194,0.4);

  /* Silver display gradient */
  --silver-gradient: linear-gradient(180deg,#FFF 0%,#EDEDED 45%,#B8B8B8 55%,#F5F5F5 100%);

  /* Semantic */
  --semantic-success: #23C980;
  --semantic-warning: #FFB454;
  --semantic-danger:  #FF5A5F;

  /* Rarity */
  --rarity-common:   #B8B8B8;
  --rarity-uncommon: #58B8FF;
  --rarity-rare:     #A566FF;
  --rarity-mythic:   #FF8A3D;
  --rarity-secret:   #00D1C2;

  /* Fonts */
  --font-body:    'Montserrat', system-ui, -apple-system, sans-serif;
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-script:  'Allura', 'Snell Roundhand', cursive;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Tracking */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.15em;
  --tracking-widest:   0.22em;

  /* Spacing */
  --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;
  --space-20: 80px;
  --space-24: 96px;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg:   0 20px 48px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 24px 0 rgba(0,209,194,0.4);
  --shadow-glow-strong: 0 0 32px 0 rgba(0,209,194,0.6);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* Layout */
  --container-max: 1240px;
  --gutter: 24px;
  --header-h: 64px;
}