/* ===================================================================
   Bhairav One
   Design System
   File : variables.css
   Version : 1.0.0
   Author : Krish + OpenAI

   DO NOT EDIT RANDOM VALUES.
   Everything inside this file is used across the entire app.

=================================================================== */

:root{

/* ==========================================================
   BRAND
========================================================== */

--brand-name:"Bhairav One";

/* ==========================================================
   PRIMARY COLORS
========================================================== */

--color-primary:#111827;
--color-primary-light:#1F2937;
--color-secondary:#6B7280;

--color-background:#F5F7FB;
--color-surface:#FFFFFF;
--color-surface-soft:#FAFBFD;

--color-border:#E5E7EB;
--color-border-light:#F1F5F9;

--color-text:#111827;
--color-text-soft:#6B7280;
--color-text-light:#9CA3AF;

--color-success:#16A34A;
--color-warning:#F59E0B;
--color-danger:#DC2626;
--color-info:#2563EB;

/* ==========================================================
   BUTTONS
========================================================== */

--button-primary:#111827;
--button-primary-hover:#000000;

--button-secondary:#FFFFFF;

--button-disabled:#D1D5DB;

/* ==========================================================
   QR
========================================================== */

--qr-background:#FFFFFF;

--qr-border:#ECECEC;

/* ==========================================================
   HEADER
========================================================== */

--header-background:rgba(255,255,255,.88);

--header-border:#ECECEC;

/* ==========================================================
   CARD
========================================================== */

--card-background:#FFFFFF;

--card-border:#ECECEC;

/* ==========================================================
   INPUT
========================================================== */

--input-background:#FFFFFF;

--input-border:#E5E7EB;

--input-focus:#111827;

/* ==========================================================
   KEYPAD
========================================================== */

--key-background:#FFFFFF;

--key-border:#E8EAED;

--key-active:#F3F4F6;

--key-shadow:0 6px 16px rgba(17,24,39,.05);

/* ==========================================================
   SPACING SYSTEM (8px Grid)
========================================================== */

--space-0:0;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-7:28px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-14:56px;
--space-16:64px;
--space-20:80px;
--space-24:96px;

/* ==========================================================
   BORDER RADIUS
========================================================== */

--radius-xs:8px;
--radius-sm:12px;
--radius-md:16px;
--radius-lg:20px;
--radius-xl:24px;
--radius-2xl:32px;
--radius-full:999px;

/* ==========================================================
   SHADOWS
========================================================== */

--shadow-xs:
0 1px 2px rgba(15,23,42,.04);

--shadow-sm:
0 4px 12px rgba(15,23,42,.05);

--shadow-md:
0 10px 24px rgba(15,23,42,.08);

--shadow-lg:
0 18px 40px rgba(15,23,42,.10);

--shadow-xl:
0 28px 70px rgba(15,23,42,.14);

/* ==========================================================
   BLUR
========================================================== */

--blur-sm:8px;
--blur-md:16px;
--blur-lg:24px;

/* ==========================================================
   APP DIMENSIONS
========================================================== */

--header-height:72px;

--bottom-nav-height:82px;

--terminal-key-size:72px;

--terminal-key-gap:14px;

--fab-size:68px;

--qr-size:240px;

--card-padding:20px;

--page-padding:20px;

/* ==========================================================
   LAYER SYSTEM
========================================================== */

--z-base:1;

--z-header:100;

--z-bottom-nav:200;

--z-dropdown:300;

--z-modal:900;

--z-toast:1000;

--z-loading:9999;

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

--font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;

--font-size-xs:12px;
--font-size-sm:14px;
--font-size-md:16px;
--font-size-lg:18px;
--font-size-xl:20px;
--font-size-2xl:24px;
--font-size-3xl:32px;
--font-size-4xl:40px;
--font-size-5xl:52px;
--font-size-6xl:68px;

--font-weight-regular:400;
--font-weight-medium:500;
--font-weight-semibold:600;
--font-weight-bold:700;
--font-weight-black:800;

--line-height-tight:1.1;
--line-height-normal:1.4;
--line-height-relaxed:1.7;

/* ==========================================================
   ICONS
========================================================== */

--icon-xs:16px;
--icon-sm:20px;
--icon-md:24px;
--icon-lg:32px;
--icon-xl:40px;

/* ==========================================================
   BUTTONS
========================================================== */

--button-height-sm:44px;
--button-height-md:52px;
--button-height-lg:60px;
--button-height-xl:68px;

/* ==========================================================
   INPUTS
========================================================== */

--input-height:58px;

/* ==========================================================
   APP BAR
========================================================== */

--status-bar-height:var(--safe-top);

--app-bar-height:64px;

/* ==========================================================
   KEYPAD
========================================================== */

--key-font-size:30px;

--key-font-weight:700;

/* ==========================================================
   QR
========================================================== */

--qr-radius:24px;

/* ==========================================================
   ANIMATION CURVES
========================================================== */

--ease-standard:cubic-bezier(.4,0,.2,1);

--ease-decelerate:cubic-bezier(0,0,.2,1);

--ease-accelerate:cubic-bezier(.4,0,1,1);

--ease-bounce:cubic-bezier(.34,1.56,.64,1);

/* ==========================================================
   THEMES
========================================================== */

}