/* =========================================================================
   INTEGRALIS DESIGN TOKENS — THE SINGLE SOURCE
   =========================================================================
   Every colour, shadow, radius, spacing and type size in the system is
   defined HERE and nowhere else. To restyle the whole product, change the
   values in this file.

   Rules:
     1. Never write a colour literal (#abc123) in any other CSS file or in a
        template's style="" — use var(--color-...) instead.
     2. This file is loaded FIRST, before every other stylesheet, so any file
        may reference these tokens.
     3. EXCEPTION: templates/superadmin/email/customer_email.html hardcodes
        its colours on purpose — Gmail and Outlook do not support CSS
        variables. If you change the brand colours, update that file by hand.
   ========================================================================= */

:root {

  /* ── BRAND ── */
  --color-blue        : #bfd9f2;
  --color-blue-soft   : #e4f0fb;
  --color-coral       : #f5837b;
  --color-green       : #bfe3c4;
  --color-green-soft  : #e6f5e8;
  --color-peach       : #f8d4bc;
  --color-pink        : #fe8bac;
  --color-pink-soft   : #ffbccf;
  --color-purple      : #d9c2f0;
  --color-purple-soft : #ede6f7;
  --color-yellow      : #f7c460;
  --color-yellow-soft : #ffe8b6;

  /* ── INK (text) ── */
  --color-ink      : #2e2b28;
  --color-ink-mute : #a8a29e;
  --color-ink-soft : #2e2b28cc;

  /* ── SURFACES ── */
  --color-bg        : #f9f5f2;
  --color-gray      : #d6d3d1;
  --color-neutral   : #efeeec;
  --color-surface   : #fff;
  --color-surface-2 : #f9f5f2;

  /* ── LINES ── */
  --color-line      : #6b6560;
  --color-line-soft : #d6d3d1;

  /* ── STATUS ── */
  --color-danger  : #ef5350;
  --color-success : #66bb6a;
  --color-warning : #fdd835;
  /* The recording buttons. Resolved HERE, on :root, so it stays the real red
     inside .sd — whose block re-declares --color-danger as coral. */
  --color-record  : var(--color-danger);
  /* Scrollbars: a fixed grey, NOT the brand's third colour ("אפור" in the
     theme editor), which the admin may set to anything. Resolved on :root so
     neither the theme nor .sd's own --color-line-soft can reach it. */
  --color-scrollbar : var(--color-line-soft);
  /* The lettering of the logo artwork (static/img/logo.svg), as drawn. Its
     puzzle pieces use --color-pink / --color-yellow, so they follow the theme. */
  --color-logo-ink  : #949698;

  /* ── INDICATORS ──
     Were hardcoded in class_board.css, where they were invisible to the
     theme editor even though they are some of the most-looked-at colours
     in the product. */
  --color-present : #fd6e04;   /* the "is here" dot on the class board */
  --color-check   : #d4f3e3;   /* the green tick inside an activity pill */

  /* ── BADGE TEXT ──
     Each badge is a soft fill with a dark text colour of the same hue. They
     travel together: change a badge fill without its text and the label stops
     being readable, which is why they are tokens rather than free choices. */
  --color-on-pink   : #9a3f5a;
  --color-on-peach  : #92512a;
  --color-on-yellow : #8a6414;
  --color-on-blue   : #29597e;
  --color-on-green  : #2c6b3a;
  --color-on-purple : #6b3f96;
  --color-peach-soft: #fff0e2;   /* the peach badge's fill */

  /* ── BORDERS & SHADOWS ── */
  --border-brutal : 1.5px solid #2e2b28;
  --shadow-brutal : 3px 3px 0 0 #2e2b28;
  --shadow-soft   : 0 4px 18px rgba(29, 29, 29, 0.05);

  /* ── RADII ── */
  /* One corner radius across the product (2026-10-11). The reference was the
     "מה עכשיו" schedule pill at 16px — a softly rounded rectangle, not a
     capsule. --radius-pill and --radius-xl now resolve to the same 1rem so
     buttons and cards agree; the scale below it is kept for small controls.
     NOTE: circles (avatars, icon wells) use `50%`, not a token, so they stay
     round. */
  --radius-lg   : 1rem;
  --radius-md   : 0.75rem;
  --radius-pill : 1rem;
  --radius-sm   : 0.5rem;
  --radius-xl   : 1rem;
  --radius-xs   : 0.375rem;

  /* ── SPACING ── */
  --space-1 : 0.25rem;
  --space-2 : 0.5rem;
  --space-3 : 0.75rem;
  --space-4 : 1rem;
  --space-5 : 1.25rem;
  --space-6 : 1.5rem;
  --space-7 : 2rem;

  /* ── TYPE ── */
  --font-num  : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-2xl  : 1.5rem;
  --text-3xl  : 1.875rem;
  --text-base : 1rem;
  --text-lg   : 1.125rem;
  --text-name : clamp(1.5rem, 1.15rem + 1.5vw, 2rem);
  --text-sm   : 0.875rem;
  --text-xl   : 1.25rem;
  --text-xs   : 0.75rem;

  /* ── MOTION ── */
  --dur-base    : 300ms;
  --dur-long    : 500ms;
  --dur-micro   : 100ms;
  --dur-short   : 200ms;
  --ease-in-out : cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out    : cubic-bezier(0.25, 0.46, 0.45, 0.94);
}