:root {

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ----- TYPE — tipográfia ----- */
  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans:  system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  /*--serif: 'Fraunces', 'Times New Roman', serif;*/
  /*--serif: Georgia, 'Times New Roman', serif;*/
  --serif2: 'Fraunces', 'Times New Roman', serif;  
  --sans:  'Inter Tight', system-ui, sans-serif;
  --mono:  'JetBrains Mono', monospace; 
  
}

/* ============================================================================
   Bárhol felülírhatod az alábbi :root változókat.
   1. ROOT VARIABLES — A te designnyelved (paletta, type, line, transitions)
   ============================================================================ */

:root {
  /* ----- COLORS — paletta ----- */

  --dark:             #0d0c0a;
  --cream:            #ebe4d5;
  --cream-deep:       #ddd4bf;
  --cream-soft:       #f3eee0;
  --ink:              #0e0d0b;
  --ink-soft:         #1a1814;
  --char:             #2a2620;
  --shadow:           #3d3830;
  --sepia:            #6b5a3a;
  --sepia-warm:       #8a7548;
  --sepia-deep:       #4a3e25;
  --paper:            #c4b896;
  --ember:            #c54a2a;
  --ember-soft:       rgba(197, 74, 42, 0.12);

  /*--cream:        #ebe4d5;*/
  /*--cream-deep:   #ddd4bf;*/
  /*--cream-soft:   #f3eee0;*/
  /*--ink:          #0e0d0b;*/
  /*--ink-soft:     #1a1814;*/
  --ink-deeper:   #050505;
  /*--char:         #2a2620;*/
  /*--sepia:        #6b5a3a;*/
  /*--sepia-deep:   #4a3e25;*/
  /*--paper:        #c4b896;*/
  --paper-soft:   #a89a78;
  --gold:         #d4b572;
  /*--gold:         #d4b87a;*/
  --gold-bright:  #e8c878;
  /*--ember:        #c54a2a;*/

}

:root {
  /*--line-dark:        rgba(235, 228, 213, 0.10);*/
  /*--line-dark-mid:    rgba(235, 228, 213, 0.18);*/
  /*--line-dark-strong: rgba(235, 228, 213, 0.28);*/
  /*--line:             rgba(14, 13, 11, 0.12);*/
  /*html*/
  /*--header-height: 88px;*/
  --header-height: 66px;
  /*--header-height: 48px;*/

  --nav-h: 84px;
  /*--max:   1440px;*/
  --max:   1640px;
  --r:     2px;
  --r-card: 4px;


  /*animtaion*/
  --ease:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   0.25s ease;
  --t-mid:    0.4s cubic-bezier(0.22, 1, 0.36, 1);
  --t-slow:   0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
/**/

/* ── LIGHT (default — matches the reference) ──────────────── */
[data-theme="light"] {
  --bg:           #f0ebe2;
  /*--bg:           #ffffff;*/
  --bg-rgb:       240, 235, 226;
  --bg-rgba:      rgba(240, 235, 226, 0.6);
  --bg-tint:      #e8e2d6;
  --bg-deep:      #ddd5c5;
  --surface:      rgba(255, 255, 255, 0.55);
  --surface-2:    rgba(255, 255, 255, 0.75);
  /*--surface-dark: rgba(20, 20, 25, 0.92);*/
  --surface-dark: rgba(253, 252, 249, 0.92);
  --glass-bg:     rgba(255, 255, 255, 0.35);
  --glass-bg-2:   rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.45);

  --text:         #1a1a1f;
  --text-2:       #4a4a52;
  --text-3:       #8a8a90;
  --text-on-dark: #f5f3ee;
  --text-on-dark-2: #b8b8be;
  
  --menu-text: #000000;
  --menu-text-2: #999999;
  --menu-line:  rgba(0, 0, 0, 0.08);
  --menu-color: rgba(0, 0, 0, 0.3);

  --line:         rgba(20, 20, 25, 0.10);
  --line-2:       rgba(20, 20, 25, 0.18);
  --line-on-dark: rgba(255, 255, 255, 0.10);

  --gold:         #c9a464;
  --gold-rgba-05: rgba(201, 164, 100, 0.5);
  --gold-2:       #e0b876;
  --gold-light:   rgba(201, 164, 100, 0.18);
  --gold-glow:    rgba(201, 164, 100, 0.35);

  --hero-grad-1:  #f4eee2;
  --hero-grad-2:  #e8dfc9;
  --hero-grad-3:  #d4c8aa;

  --nav-bg:       rgba(240, 235, 226, 0.78);
  /*--nav-bg:       rgba(255, 255, 255, 0.78);*/
  --nav-bg-solid: rgba(240, 235, 226, 0.95);

  --shadow-card:  0 1px 2px rgba(20,20,25,0.04), 0 8px 24px rgba(20,20,25,0.06);
  --shadow-pill:  0 24px 48px -12px rgba(40, 35, 25, 0.18), 0 8px 16px -4px rgba(40, 35, 25, 0.10);

  --grain:        0.08;
}

/* ── DARK (deep night, golden veins) ──────────────────────── */
[data-theme="dark"] {
  --bg:           #0d0c0a;
  --bg-rgb:       13, 12, 10;
  --bg-rgba:       rgba(13, 12, 10, 0.6);
  --bg-tint:      #14130f;
  --bg-deep:      #1c1a15;
  --surface:      rgba(30, 28, 22, 0.55);
  --surface-2:    rgba(40, 38, 30, 0.75);
  --surface-dark: rgba(8, 8, 10, 0.92);
  --glass-bg:     rgba(255, 255, 255, 0.04);
  --glass-bg-2:   rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.08);

  --text:         #ede5d3;
  --text-2:       #98907e;
  --text-3:       #5a554a;
  --text-on-dark: #ede5d3;
  --text-on-dark-2: #98907e;

  --menu-text: #ede5d3;
  --menu-text-2: #98907e;
  --menu-line:  rgba(255, 255, 255, 0.08);
  --menu-color: rgba(255, 255, 255, 0.3);

  --line:         rgba(255, 255, 255, 0.06);
  --line-2:       rgba(255, 255, 255, 0.12);
  --line-on-dark: rgba(255, 255, 255, 0.08);

  --gold:         #d4ad6a;
  --gold-rgba-05: rgba(201, 164, 100, 0.5);
  --gold-2:       #f0c882;
  --gold-light:   rgba(212, 173, 106, 0.14);
  --gold-glow:    rgba(212, 173, 106, 0.30);

  --hero-grad-1:  #14110b;
  --hero-grad-2:  #1f1a12;
  --hero-grad-3:  #2a2317;

  --nav-bg:       rgba(13, 12, 10, 0.78);
  --nav-bg-solid: rgba(13, 12, 10, 0.96);

  --shadow-card:  0 1px 2px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.4);
  --shadow-pill:  0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 8px 16px -4px rgba(0, 0, 0, 0.4);

  --grain:        0.30;
}

/* ── NATIONAL (red-white-green) ──────────────────────── */
/*[data-theme="national"] {}*/