/* ============================================================
   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');

@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;
}

:root {
  /* Brand blue, sampled from the round Ezer logo */
  --color-primary-900:  #1B334A;
  --color-primary-800:  #244A70;
  --color-primary-700:  #2F6FA8;
  --color-primary-600:  #3F86C6;
  --color-primary-500:  #60A0E0;
  --color-primary-400:  #7FB5EA;
  --color-primary-300:  #A7D0F3;
  --color-primary-200:  #C9E2F8;
  --color-primary-100:  #E3F1FC;
  --color-primary-50:   #F2F8FE;

  /* Neutral */
  --color-neutral-900:  #18212B;
  --color-neutral-800:  #263443;
  --color-neutral-700:  #3C4B5A;
  --color-neutral-600:  #657484;
  --color-neutral-500:  #8896A5;
  --color-neutral-400:  #A9B5C1;
  --color-neutral-300:  #D2DCE5;
  --color-neutral-200:  #E8EEF4;
  --color-neutral-100:  #F6FAFD;
  --color-neutral-50:   #FBFDFF;
  --color-white:        #FFFFFF;

  /* Semantic */
  --color-success-dark:    #1E7A34;
  --color-success:         #2F9E44;
  --color-success-light:   #D3F9D8;
  --color-warning-dark:    #B86B00;
  --color-warning:         #F2A65A;
  --color-warning-light:   #FFF2E2;
  --color-error-dark:      #C53030;
  --color-error:           #E53E3E;
  --color-error-light:     #FED7D7;
  --color-info:            var(--color-primary-500);
  --color-info-light:      var(--color-primary-50);
  --color-accent:          #F2A65A;
  --color-accent-light:    #FFF2E2;

  /* 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);

  /* Font families */
  --font-display: 'Frank Ruhl Libre', 'Heebo', serif;
  --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:   0em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;

  /* Spacing */
  --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(96,160,224,0.28);

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

*, *::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);
}