/* Generated by @izzat/ds sync. DO NOT EDIT. Source: packages/izzat-ds/tokens.css */ /* version: 0.1.0 · hash: b789feee */ /* ============================================================ @izzat/ds — Canonical Design Tokens (v0.2.0) Source of truth: izzat-global (extraído de izzatglobal.com) Consumed by: izzat-hub · izzat-global-site · izzat-crm Hub = backend organizado do izzat-global. Mesmos tokens. Edit here → run `npm run ds:sync` no izzat-hub root. ============================================================ */ :root { /* ─── IZG · Cores canônicas (5 neutros + 3 accent) ─────── */ --izg-black: #1d1d1f; --izg-gray-body: #6e6e73; --izg-gray-light: #86868b; --izg-gray-bg: #fafafa; --izg-white: #ffffff; --izg-accent: #FF6A00; /* BRAND OFICIAL · INVIOLÁVEL */ --izg-accent-2: #FF8A3D; --izg-accent-hover: #e55d00; /* ─── IZG · Bordas (2) ──────────────────────────────────── */ --izg-border: rgba(0, 0, 0, 0.08); --izg-border-soft: rgba(0, 0, 0, 0.05); /* ─── IZG · Sombras (4 níveis) ─────────────────────────── */ --izg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --izg-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06); --izg-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.08); --izg-shadow-xl: 0 30px 60px rgba(0, 0, 0, 0.15); /* ─── IZG · Radius (4 níveis Apple) ────────────────────── */ --izg-radius-sm: 10px; --izg-radius-md: 16px; --izg-radius-lg: 22px; --izg-radius-pill: 980px; /* ─── IZG · Easings (2 Apple-grade) ────────────────────── */ --izg-ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1); --izg-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ─── IZG · Font canônico ──────────────────────────────── */ --izg-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; /* ─── Marketing typography (clamp responsivo) ──────────── */ --ease-marketing: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-fast: 200ms; --duration-base: 400ms; --duration-slow: 800ms; --container-max: 980px; --container-narrow: 640px; --nav-height: 44px; --section-py: clamp(56px, 10vh, 120px); --section-py-compact: clamp(48px, 8vh, 96px); --text-display: clamp(3rem, 8vw, 5rem); --text-h1: clamp(2.5rem, 5vw, 4rem); --text-h2: clamp(2rem, 4vw, 3rem); --text-h3: clamp(1.5rem, 3vw, 2rem); --text-h4: clamp(1.125rem, 2vw, 1.5rem); --text-body-lg: clamp(1.125rem, 2vw, 1.375rem); --text-body: 1.0625rem; --text-body-sm: 0.875rem; --text-label: 0.75rem; --tracking-display: -0.04em; --tracking-h1: -0.035em; --tracking-h2: -0.02em; --tracking-h3: -0.015em; --leading-display: 1.05; --leading-h2: 1.15; --leading-body: 1.65; /* ─── App typography scale (CRM-style · operacional denso) */ --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px; --fs-4xl: 36px; --fs-5xl: 44px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; /* ─── Spacing (base 4px) ───────────────────────────────── */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ─── Status semantic ──────────────────────────────────── */ --success: #10A86E; --warning: #C78B11; --danger: #D64C5B; --info: #2F7AC6; --violet: #7E5BD9; --teal: #1AA59F; /* ─── Aliases semânticos (CRM/site backward compat) ────── */ /* Surfaces light */ --bg-0: var(--izg-gray-bg); /* page */ --bg-1: var(--izg-white); /* card */ --bg-2: #F0F0F2; /* hover */ --bg-3: #FAFAFB; /* alt row */ --bg-glass: rgba(255, 255, 255, 0.82); /* Text hierarchy */ --tx-1: var(--izg-black); /* primary */ --tx-2: var(--izg-gray-body); /* secondary */ --tx-3: var(--izg-gray-light); /* muted */ --tx-4: #B5B7BD; /* disabled */ --tx-inverse: var(--izg-white); /* Borders */ --border: var(--izg-border); --border-strong: rgba(0, 0, 0, 0.14); --border-hover: rgba(0, 0, 0, 0.22); /* Brand legacy aliases (DEPRECATED · usar --izg-accent) */ --brand: var(--izg-accent); --accent: var(--izg-accent); --primary-text: var(--izg-accent); /* Shadows semantic */ --shadow-1: var(--izg-shadow-sm); --shadow-2: var(--izg-shadow-md); --shadow-3: var(--izg-shadow-lg); --shadow-4: var(--izg-shadow-xl); --shadow-focus: 0 0 0 3px rgba(255, 106, 0, .25); --shadow-card: 0 4px 24px rgba(0, 0, 0, .06); --shadow-glow: 0 0 60px rgba(255, 106, 0, .06); /* Radius semantic */ --rd-sm: var(--izg-radius-sm); --rd-md: var(--izg-radius-md); --rd-lg: var(--izg-radius-lg); --rd-xl: 24px; --rd-2xl: 28px; --rd-full: var(--izg-radius-pill); /* Motion semantic */ --ease-app: cubic-bezier(0.4, 0, 0.2, 1); } /* ═══════════════════════════════════════════════════════════ DARK MODE — hub (protected) routes + crm dark variant Aplicar via `.dark` class no ou ═══════════════════════════════════════════════════════════ */ .dark { --bg-0: #0C0C0E; --bg-1: #111113; --bg-2: #1C1C20; --bg-3: #141416; --bg-glass: rgba(20, 20, 22, 0.82); --tx-1: #F5F5F7; --tx-2: #C7C8CC; --tx-3: #8B8E96; --tx-4: #5A5C63; --tx-inverse: var(--izg-black); --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .14); --border-hover: rgba(255, 255, 255, .22); --izg-border: rgba(255, 255, 255, .08); --izg-border-soft: rgba(255, 255, 255, .05); --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 2px 6px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3); --shadow-3: 0 8px 24px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3); --shadow-4: 0 20px 60px rgba(0, 0, 0, .6), 0 8px 24px rgba(0, 0, 0, .4); }