/* =====================================================================
   ROKO DESIGN TOKENS
   ---------------------------------------------------------------------
   This file is the single source of truth for brand colors, fonts,
   spacing and radii. Change a value here and it updates everywhere
   (landing page + brand guide).

   The same values are mirrored in /brand/tokens.json for designers
   and other tools (Figma, Tailwind, etc.).
   ===================================================================== */

:root {
  /* ---------- Brand palette ---------- */

  /* Ink — our "black". Backgrounds, text, the logo mark. */
  --ink-950: #0A0D12;
  --ink-900: #0E1116;   /* Primary ink */
  --ink-800: #171B22;
  --ink-700: #252B35;
  --ink-500: #5B6472;   /* Muted text on light backgrounds */
  --ink-300: #A3ABB8;   /* Muted text on dark backgrounds */
  --ink-100: #E3E6EB;

  /* Paper — our "white". Warm, calm, easy on the eyes. */
  --paper:     #F7F5F0; /* Primary paper */
  --paper-200: #EEEBE3;
  --paper-300: #E2DED3; /* Borders on light backgrounds */
  --white:     #FFFFFF;

  /* Ember — the signature accent. The "cursor" in the logo. */
  --ember-50:  #FFF1EB;
  --ember-100: #FFE1D4;
  --ember-400: #FF7A45;
  --ember-500: #FF5A1F; /* Primary accent */
  --ember-600: #E8470E;
  --ember-700: #C2390A; /* Accent for small text on light backgrounds */

  /* Circuit — supporting color for success / "done" states. */
  --circuit-100: #D3F5F1;
  --circuit-500: #12B5A5;
  --circuit-700: #0B857A;

  /* ---------- Semantic roles (use these in components) ---------- */
  --color-bg:          var(--paper);
  --color-surface:     var(--white);
  --color-surface-alt: var(--paper-200);
  --color-text:        var(--ink-900);
  --color-text-muted:  var(--ink-500);
  --color-border:      var(--paper-300);
  --color-accent:      var(--ember-500);
  --color-accent-text: var(--ember-700);
  --color-on-accent:   var(--ink-950);   /* Text placed on ember */

  /* ---------- Typography ---------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* ---------- Shape & layout ---------- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(14 17 22 / 0.06), 0 2px 8px rgb(14 17 22 / 0.04);
  --shadow-lg: 0 24px 60px -20px rgb(10 13 18 / 0.45);

  --container: 1180px;
}

/* Arabic pages: Latin text (Roko, ERP, emails) keeps the brand fonts,
   Arabic letters fall through to IBM Plex Sans Arabic. */
:root:lang(ar) {
  --font-display: "Space Grotesk", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-body:    "Inter", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;
}