/* ============================================================
   EZER DESIGN SYSTEM — Colors & Typography
   ezer.my | Facebook Automation SaaS
   Primary language: Hebrew (RTL)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700;800&display=swap');

/* Brand display font — Frank Ruhl Libre Black (uploaded) */
@font-face {
  font-family: 'Frank Ruhl Libre';
  src: url('fonts/Frank_Ruhl_Libre_Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   COLOR TOKENS — Base Palette
   ============================================================ */
:root {
  /* Brand Blue */
  --color-primary-900:  #0C4063;
  --color-primary-800:  #0F5280;
  --color-primary-700:  #125F8A;
  --color-primary-600:  #156EA0;
  --color-primary-500:  #1879AE;  /* ← Brand primary */
  --color-primary-400:  #2A9DD6;
  --color-primary-300:  #5BBAE5;
  --color-primary-200:  #A8D8F0;
  --color-primary-100:  #D4EDF9;
  --color-primary-50:   #E8F4FB;

  /* Neutral */
  --color-neutral-900:  #1A1F2E;
  --color-neutral-800:  #2D3748;
  --color-neutral-700:  #4A5568;
  --color-neutral-600:  #718096;
  --color-neutral-500:  #8E9CB0;
  --color-neutral-400:  #A0AEC0;
  --color-neutral-300:  #CBD5E0;
  --color-neutral-200:  #EDF2F7;
  --color-neutral-100:  #F7FAFC;
  --color-neutral-50:   #FAFBFC;
  --color-white:        #FFFFFF;

  /* Semantic */
  --color-success-dark:    #1E7A34;
  --color-success:         #2F9E44;
  --color-success-light:   #D3F9D8;
  --color-warning-dark:    #D97706;
  --color-warning:         #F59E0B;
  --color-warning-light:   #FEF3C7;
  --color-error-dark:      #C53030;
  --color-error:           #E53E3E;
  --color-error-light:     #FED7D7;
  --color-info:            #1879AE;
  --color-info-light:      #E8F4FB;

  /* ============================================================
     SEMANTIC COLOR ALIASES
     ============================================================ */

  /* Foreground / Text */
  --fg-primary:       var(--color-neutral-900);
  --fg-secondary:     var(--color-neutral-700);
  --fg-muted:         var(--color-neutral-500);
  --fg-disabled:      var(--color-neutral-400);
  --fg-inverse:       var(--color-white);
  --fg-brand:         var(--color-primary-500);
  --fg-brand-hover:   var(--color-primary-700);

  /* Background */
  --bg-page:          var(--color-neutral-100);
  --bg-surface:       var(--color-white);
  --bg-subtle:        var(--color-neutral-50);
  --bg-brand:         var(--color-primary-500);
  --bg-brand-dark:    var(--color-primary-700);
  --bg-brand-pale:    var(--color-primary-50);
  --bg-sidebar:       var(--color-neutral-900);

  /* Border */
  --border-default:   var(--color-neutral-200);
  --border-strong:    var(--color-neutral-300);
  --border-brand:     var(--color-primary-500);
  --border-focus:     var(--color-primary-500);

  /* Interactive */
  --interactive-primary:          var(--color-primary-500);
  --interactive-primary-hover:    var(--color-primary-700);
  --interactive-primary-pressed:  var(--color-primary-900);
  --interactive-secondary:        var(--color-neutral-200);
  --interactive-secondary-hover:  var(--color-neutral-300);

  /* ============================================================
     TYPOGRAPHY TOKENS
     ============================================================ */

  /* Font families */
  --font-display: 'Frank Ruhl Libre', 'Heebo', serif;  /* Black 900 — Hebrew display headings */
  --font-sans:    'Heebo', system-ui, -apple-system, sans-serif;
  --font-mono:    'Courier New', 'Courier', monospace;

  /* Font sizes */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    24px;
  --text-xl:    32px;
  --text-2xl:   40px;
  --text-3xl:   56px;

  /* Font weights */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;

  /* ============================================================
     SPACING TOKENS
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 24px;
  --radius-full: 9999px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-subtle:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-card:     0 2px 8px rgba(0,0,0,0.10);
  --shadow-elevated: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-focus:    0 0 0 3px rgba(24,121,174,0.25);

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --transition-fast:   150ms ease-in-out;
  --transition-base:   250ms ease-in-out;
  --transition-slow:   350ms ease-in-out;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
}

h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h4 {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

p {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

small, .text-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

a {
  color: var(--fg-brand);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--fg-brand-hover); }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-neutral-200);
  padding: 2px 5px;
  border-radius: var(--radius-sm);
}