/* === FlowOps Surgical Precision tokens === */ :root { /* palette */ --primary: #111827; --primary-600: #0F1522; --primary-300: #8D9097; --primary-200: #B3B5BA; --secondary: #FFEDD5; --secondary-300: #FFF6EB; --secondary-400: #FFF2E1; --secondary-600: #DBCCB7; --tertiary: #4B5563; --tertiary-300: #A9ADB4; --tertiary-700: #353C45; --neutral: #FFFFFF; --bg: #E5E7EB; --bg-soft: #EEF0F3; --surface: #FFFFFF; --text-primary: #111827; --text-body: #4B5563; --text-muted: #6B7280; --text-subtle: #9CA3AF; --border-soft: rgba(17, 24, 39, 0.06); --border: rgba(17, 24, 39, 0.10); --border-strong: rgba(17, 24, 39, 0.18); /* texto que vai sobre fundo --primary (light: branco; dark: escuro) */ --primary-text: #FFFFFF; /* terminal sempre escuro independente de tema */ --term-bg: #050507; --term-fg: #D8D8E0; --term-prompt: #FFA64D; --term-dim: rgba(216, 216, 224, 0.45); --term-ok: #86EFAC; --term-warn: #FED7AA; --term-err: #FCA5A5; /* code blocks: light=dark/peach, dark=deeper-dark/peach */ --code-bg: #111827; --code-fg: #FFEDD5; --code-bg-soft: #FFEDD5; --code-fg-soft: #111827; /* gradients tema-aware (definição light) */ --gradient-card-warm: linear-gradient(135deg, var(--secondary-300), var(--neutral)); --gradient-card-danger: linear-gradient(135deg, #FFE4D5 0%, var(--neutral) 60%); /* hover backgrounds */ --hover-bg: rgba(17, 24, 39, 0.06); --hover-bg-strong: rgba(17, 24, 39, 0.10); /* semantic — kept restrained per Don'ts (don't introduce extra accents) */ --semantic-danger: #C2410C; /* harvest red — within secondary warm family */ --semantic-danger-soft: #FEE4D5; --semantic-warning: #B45309; --semantic-warning-soft: #FFEDD5; --semantic-success: #166534; --semantic-success-soft: #DCFCE7; --semantic-info: #1E3A8A; --semantic-info-soft: #DBEAFE; /* radii — per Shapes */ --r-xs: 6px; --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 32px; --r-pill: 9999px; /* spacing — base 4px */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 64px; --s-8: 88px; /* shadows — Elevation & Depth recipe */ --shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.06), 0 24px 24px -12px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.08), 0 8px 16px -4px rgba(0, 0, 0, 0.10), 0 16px 32px -8px rgba(0, 0, 0, 0.10); --shadow-press: 0 12px 24px -6px rgba(0, 0, 0, 0.4), inset 0 1px 1px 0 rgba(255, 255, 255, 0.15), inset 0 -2px 3px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.1); --shadow-soft: 0 2px 3px -1px rgba(0, 0, 0, 0.10), 0 1px 0 0 rgba(25, 28, 33, 0.02), 0 0 0 1px rgba(25, 28, 33, 0.08); /* motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 150ms; --t-mid: 300ms; --font-sans: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* type tokens */ --label-tracking: 0.35px; --body-tracking: 0.025em; --display-tracking: -0.025em; } [data-theme="dark"] { --bg: #0B0E13; --bg-soft: #14181F; --surface: #1A1F2A; --text-primary: #F5F5F7; --text-body: #C8CAD0; --text-muted: #8D9097; --text-subtle: #5C6068; --border-soft: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.22); --primary: #FFEDD5; --primary-text: #111827; /* texto escuro sobre primary peach */ --primary-600: #FFE0B8; --secondary: #2A2F3A; --secondary-300: #1F232C; --secondary-400: #252A33; --secondary-600: #3A4150; --neutral: #FFFFFF; /* code blocks no dark — deep bg + peach text */ --code-bg: #050507; --code-fg: #FFEDD5; /* code inline (badge style): dark surface + peach text */ --code-bg-soft: #2A2F3A; --code-fg-soft: #FFEDD5; /* gradients tema-aware (override dark) */ --gradient-card-warm: linear-gradient(135deg, var(--secondary-300), var(--surface)); --gradient-card-danger: linear-gradient(135deg, rgba(194, 65, 12, 0.22) 0%, var(--surface) 60%); /* hover backgrounds dark — claros sobre fundo escuro */ --hover-bg: rgba(255, 255, 255, 0.06); --hover-bg-strong: rgba(255, 255, 255, 0.10); /* shadow card mais visível no dark */ --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.3), 0 3px 6px -1.5px rgba(0, 0, 0, 0.35), 0 8px 16px -6px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 4px 10px -2px rgba(0, 0, 0, 0.4), 0 12px 24px -6px rgba(0, 0, 0, 0.5); } [data-theme="dark"] body::before { background: radial-gradient(circle at 18% 12%, rgba(255, 237, 213, 0.06), transparent 45%), radial-gradient(circle at 86% 84%, rgba(255, 237, 213, 0.04), transparent 50%); } * { box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text-body); font-size: 14px; font-weight: 400; letter-spacing: var(--body-tracking); -webkit-font-smoothing: antialiased; overflow: hidden; position: relative; } /* radial atmospheric gradient — within design Gradients list */ body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(circle at 18% 12%, rgba(255, 237, 213, 0.55), transparent 45%), radial-gradient(circle at 86% 84%, rgba(255, 237, 213, 0.30), transparent 50%), linear-gradient(180deg, #FFFFFF 0%, transparent 30%); pointer-events: none; z-index: 0; } [data-theme="dark"] body::before { background: radial-gradient(circle at 18% 12%, rgba(255, 237, 213, 0.05), transparent 45%), radial-gradient(circle at 86% 84%, rgba(255, 237, 213, 0.04), transparent 50%); } .app-grid, .modal, .modal-backdrop { position: relative; z-index: 1; }