/* ============================================================
   bodekoti — design tokens
   ערוך כאן את צבעי האתר ועיצובו

   How to edit (איך לערוך):
   ──────────────────────────────────────────────────────────
   1. Open this file on github.com/yanivtz/Bodekoti
      → click the pencil ✏️ icon to edit in the browser.
   2. Change any value below. Save by committing the change
      (any commit message works, e.g. "tweak primary color").
   3. Vercel auto-deploys in ~60 seconds — refresh the live
      site and you'll see the change.
   4. To go back, edit the value again or use GitHub's
      "history" view to restore an older version.

   Notes (הערות):
   - Only change the values (after the colon, before the
     semicolon). Don't change the variable names.
   - For colors, you can use hex (#FFFFFF), rgb, rgba, or
     hsl. Use a color picker like https://htmlcolorcodes.com/
     to find values you like.
   - The * mark next to a variable means "this is the most
     impactful one — try changing this first."
   ============================================================ */

:root {

  /* ─── BRAND COLORS · צבעי המותג ─────────────────────── */

  /* * The main button / accent color — a confident blue.
     LinkedIn-style: one brand color used sparingly for CTAs. */
  --warm: #2563EB;

  /* The hover state of the main button (slightly lighter). */
  --warm2: #3B82F6;

  /* A pale tint of --warm used in selected states / soft
     highlights. Should be a very transparent version of warm. */
  --warm-tint: rgba(37,99,235,0.08);

  /* Secondary accent — demoted to a near-neutral slate so the
     primary blue does all the eye-catching. Used on a few
     decorative elements (onboarding gradient, etc.). */
  --forest: #475569;
  --forest2: #64748B;


  /* ─── SURFACES · צבעי רקע ────────────────────────────── */

  /* * Whole-page background — pure white for the cleanest look. */
  --sand: #FFFFFF;

  /* Card hover / soft surface — neutral light grey, no warm cast. */
  --clay: #F1F5F9;

  /* Slightly deeper grey for hovers and secondary backgrounds. */
  --clay2: #E2E8F0;

  /* Page divider / input border color — neutral. */
  --border: #E5E7EB;


  /* ─── TEXT · צבעי טקסט ───────────────────────────────── */

  /* * Primary text color — slate near-black. */
  --ink: #0F172A;

  /* Muted / secondary text (timestamps, captions) — slate grey. */
  --muted: #64748B;


  /* ─── SHAPES · עיצוב שלדי ────────────────────────────── */

  /* * Default border-radius for cards and inputs.
     Try: 8px (sharper), 14px (current), 20px (softer). */
  --radius: 14px;

  /* Small radius for tight elements like chips. */
  --radius-sm: 10px;

  /* Large radius for bigger blocks like modals. */
  --radius-lg: 20px;

}


/* ============================================================
   READY-MADE PALETTES · ערכות צבעים מוכנות
   ────────────────────────────────────────────────────────────
   Want to try a totally different look? Uncomment ONE of the
   blocks below (remove the / * and * /) and the whole site
   will switch to that palette. Make sure only one is active.

   To uncomment in GitHub, just delete the two lines that say
   "/* ──── name ────" and the matching "──── end ────  * /".
   ============================================================ */

/* ──── Cool blue (a LinkedIn-ish palette) ────
:root {
  --warm: #2563EB;
  --warm2: #3B82F6;
  --warm-tint: rgba(37,99,235,0.10);
  --forest: #1E3A8A;
  --forest2: #2845A0;
  --sand: #F8FAFC;
  --clay: #EFF3F8;
  --clay2: #DEE6EF;
  --border: #DAE3EE;
  --ink: #0F172A;
  --muted: #64748B;
}
──── end ──── */

/* ──── Forest green (calm, trust-building) ────
:root {
  --warm: #2D8758;
  --warm2: #3DA46B;
  --warm-tint: rgba(45,135,88,0.10);
  --forest: #1B3A2A;
  --forest2: #234E37;
  --sand: #F8FAF6;
  --clay: #EDF2EA;
  --clay2: #DEE6D8;
  --border: #DCE5D5;
  --ink: #1A1F18;
  --muted: #6B746A;
}
──── end ──── */

/* ──── Coral pink (warmer, more inviting) ────
:root {
  --warm: #E55A4D;
  --warm2: #F07065;
  --warm-tint: rgba(229,90,77,0.10);
  --forest: #2D5645;
  --forest2: #3A6B57;
  --sand: #FAF7F4;
  --clay: #F5EBE6;
  --clay2: #EBDDD4;
  --border: #E8DBD0;
  --ink: #1C1614;
  --muted: #7B6B66;
}
──── end ──── */

/* ──── High-contrast monochrome (modern, minimalist) ────
:root {
  --warm: #1C1614;
  --warm2: #38302C;
  --warm-tint: rgba(28,22,20,0.06);
  --forest: #38302C;
  --forest2: #4A413B;
  --sand: #FFFFFF;
  --clay: #F5F4F1;
  --clay2: #EBE8E2;
  --border: #DDD8D0;
  --ink: #1C1614;
  --muted: #6B635D;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
}
──── end ──── */