/** * ============================================================================ * NUTRIX APPLE DESIGN SYSTEM - DESIGN TOKENS * ============================================================================ * * Implements Apple Human Interface Guidelines (HIG) as the official design * standard for NutriX. All tokens follow the HIG specification exactly. * * References: * - Apple HIG: https://developer.apple.com/design/human-interface-guidelines/ * - NutriX Frontend Guide: docs/nutrixfrontend.md * * IMPORTANT: Use these CSS variables — never hardcode colors, sizes, or * spacing values. Follow the 8pt grid system for all spacing decisions. * * @version 2.0.0 * @author NutriX Team * @updated 2026-03 */ :root { /* ======================================================================== * ESCALA GLOBAL - CONTROLE DE ZOOM * ======================================================================== * Ajuste este valor para controlar o tamanho geral de TODOS os elementos. * Valores sugeridos: 0.72–0.78 (área nutri mais compacta), 0.85–0.92, 1 (100%) */ --apple-scale: 0.72; /* ======================================================================== * CORES - SISTEMA DE CORES APPLE-STYLE * ======================================================================== */ /* Cores Primárias NutriX */ --apple-primary: #0F5C5C; --apple-primary-hover: #0a4a4a; --apple-primary-active: #084040; --apple-primary-light: rgba(15, 92, 92, 0.1); --apple-primary-ultra-light: rgba(15, 92, 92, 0.05); /* Cores de Acento */ --apple-accent: #007AFF; --apple-accent-hover: #0056CC; --apple-accent-light: rgba(0, 122, 255, 0.1); /* Cores Semânticas */ --apple-success: #34C759; --apple-success-hover: #2DB84E; --apple-success-light: rgba(52, 199, 89, 0.1); --apple-warning: #FF9500; --apple-warning-hover: #E68600; --apple-warning-light: rgba(255, 149, 0, 0.1); --apple-danger: #FF3B30; --apple-danger-hover: #E6352B; --apple-danger-light: rgba(255, 59, 48, 0.1); --apple-info: #5AC8FA; --apple-info-hover: #4AB8EA; --apple-info-light: rgba(90, 200, 250, 0.1); /* Escala de Cinzas Apple */ --apple-gray-50: #FAFAFA; --apple-gray-100: #F5F5F7; --apple-gray-200: #E8E8ED; --apple-gray-300: #D2D2D7; --apple-gray-400: #AEAEB2; --apple-gray-500: #8E8E93; --apple-gray-600: #636366; --apple-gray-700: #48484A; --apple-gray-800: #3A3A3C; --apple-gray-900: #1D1D1F; /* Cores de Background */ --apple-bg-primary: #FFFFFF; --apple-bg-secondary: #F5F5F7; --apple-bg-tertiary: #E8E8ED; --apple-bg-grouped: #F2F2F7; --apple-bg-elevated: #FFFFFF; /* Cores de Texto */ --apple-text-primary: #1D1D1F; --apple-text-secondary: #6E6E73; --apple-text-tertiary: #AEAEB2; --apple-text-quaternary: #C7C7CC; --apple-text-placeholder: #C7C7CC; --apple-text-inverse: #FFFFFF; /* Cores de Borda */ --apple-border-light: rgba(0, 0, 0, 0.04); --apple-border-default: rgba(0, 0, 0, 0.08); --apple-border-strong: rgba(0, 0, 0, 0.12); --apple-border-focus: var(--apple-primary); /* Cores de Separador — HIG exact values */ --apple-separator: rgba(60, 60, 67, 0.29); /* non-opaque separator */ --apple-separator-opaque: #c6c6c8; /* opaque separator */ /* ======================================================================== * TIPOGRAFIA - SAN FRANCISCO STYLE * ======================================================================== */ /* Font Family */ --apple-font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', 'Roboto', sans-serif; --apple-font-rounded: -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Display', sans-serif; --apple-font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace; --apple-page-content-scale: 0.85; --apple-page-content-font-family: var(--apple-font-system); --apple-page-content-font-size: var(--apple-text-base); --apple-page-content-line-height: var(--apple-leading-normal); /* Font Sizes - Escala tipográfica Apple (escaláveis) */ --apple-text-xs: calc(0.6875rem * var(--apple-scale)); /* 11px base */ --apple-text-sm: calc(0.8125rem * var(--apple-scale)); /* 13px base */ --apple-text-base: calc(0.9375rem * var(--apple-scale)); /* 15px base */ --apple-text-md: calc(1rem * var(--apple-scale)); /* 16px base */ --apple-text-lg: calc(1.0625rem * var(--apple-scale)); /* 17px base */ --apple-text-xl: calc(1.25rem * var(--apple-scale)); /* 20px base */ --apple-text-2xl: calc(1.5rem * var(--apple-scale)); /* 24px base */ --apple-text-3xl: calc(1.75rem * var(--apple-scale)); /* 28px base */ --apple-text-4xl: calc(2.125rem * var(--apple-scale)); /* 34px base */ --apple-text-5xl: calc(2.75rem * var(--apple-scale)); /* 44px base */ /* Font Weights */ --apple-font-regular: 400; --apple-font-medium: 500; --apple-font-semibold: 600; --apple-font-bold: 700; /* Line Heights */ --apple-leading-tight: 1.1; --apple-leading-snug: 1.25; --apple-leading-normal: 1.4; --apple-leading-relaxed: 1.5; --apple-leading-loose: 1.75; /* Letter Spacing */ --apple-tracking-tighter: -0.02em; --apple-tracking-tight: -0.01em; --apple-tracking-normal: 0; --apple-tracking-wide: 0.01em; --apple-tracking-wider: 0.02em; /* ======================================================================== * ESPACAMENTO - SISTEMA DE 4PX (escaláveis) * ======================================================================== */ --apple-space-0: 0; --apple-space-1: calc(0.25rem * var(--apple-scale)); /* 4px base */ --apple-space-2: calc(0.5rem * var(--apple-scale)); /* 8px base */ --apple-space-3: calc(0.75rem * var(--apple-scale)); /* 12px base */ --apple-space-4: calc(1rem * var(--apple-scale)); /* 16px base */ --apple-space-5: calc(1.25rem * var(--apple-scale)); /* 20px base */ --apple-space-6: calc(1.5rem * var(--apple-scale)); /* 24px base */ --apple-space-7: calc(1.75rem * var(--apple-scale)); /* 28px base */ --apple-space-8: calc(2rem * var(--apple-scale)); /* 32px base */ --apple-space-10: calc(2.5rem * var(--apple-scale)); /* 40px base */ --apple-space-12: calc(3rem * var(--apple-scale)); /* 48px base */ --apple-space-14: calc(3.5rem * var(--apple-scale)); /* 56px base */ --apple-space-16: calc(4rem * var(--apple-scale)); /* 64px base */ --apple-space-20: calc(5rem * var(--apple-scale)); /* 80px base */ --apple-space-24: calc(6rem * var(--apple-scale)); /* 96px base */ /* ======================================================================== * BORDER RADIUS - CANTOS ARREDONDADOS APPLE (escaláveis) * ======================================================================== */ --apple-radius-none: 0; --apple-radius-sm: calc(0.375rem * var(--apple-scale)); /* 6px base */ --apple-radius-md: calc(0.5rem * var(--apple-scale)); /* 8px base */ --apple-radius-lg: calc(0.75rem * var(--apple-scale)); /* 12px base */ --apple-radius-xl: calc(1rem * var(--apple-scale)); /* 16px base */ --apple-radius-2xl: calc(1.25rem * var(--apple-scale)); /* 20px base */ --apple-radius-3xl: calc(1.5rem * var(--apple-scale)); /* 24px base */ --apple-radius-full: 9999px; /* Radius específicos para componentes */ --apple-radius-button: calc(0.5rem * var(--apple-scale)); --apple-radius-input: calc(0.5rem * var(--apple-scale)); --apple-radius-card: calc(1rem * var(--apple-scale)); --apple-radius-modal: calc(1.25rem * var(--apple-scale)); --apple-radius-pill: 9999px; /* ======================================================================== * SOMBRAS - ELEVACAO APPLE * ======================================================================== */ /* Sombras sutis e elegantes */ --apple-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --apple-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --apple-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --apple-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10); --apple-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12); --apple-shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.14); /* Sombras com cor (para cards destacados) */ --apple-shadow-primary: 0 4px 16px rgba(15, 92, 92, 0.15); --apple-shadow-success: 0 4px 16px rgba(52, 199, 89, 0.15); --apple-shadow-danger: 0 4px 16px rgba(255, 59, 48, 0.15); /* Sombra interna (para inputs focus) */ --apple-shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.06); --apple-shadow-focus: 0 0 0 4px rgba(15, 92, 92, 0.15); /* Sombra para elementos elevados (modais, dropdowns) */ --apple-shadow-elevated: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06); /* ======================================================================== * TRANSICOES E ANIMACOES * ======================================================================== */ /* Durações */ --apple-duration-instant: 0.1s; --apple-duration-fast: 0.2s; --apple-duration-normal: 0.3s; --apple-duration-slow: 0.4s; --apple-duration-slower: 0.5s; /* Easings - Curvas de animação Apple */ --apple-ease-default: cubic-bezier(0.25, 0.1, 0.25, 1); --apple-ease-in: cubic-bezier(0.42, 0, 1, 1); --apple-ease-out: cubic-bezier(0, 0, 0.58, 1); --apple-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); --apple-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --apple-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Transições pré-definidas */ --apple-transition-fast: all 0.2s var(--apple-ease-default); --apple-transition-normal: all 0.3s var(--apple-ease-default); --apple-transition-slow: all 0.4s var(--apple-ease-default); --apple-transition-transform: transform 0.3s var(--apple-ease-default); --apple-transition-opacity: opacity 0.3s var(--apple-ease-default); --apple-transition-colors: background-color 0.2s, border-color 0.2s, color 0.2s; /* ======================================================================== * Z-INDEX - CAMADAS * ======================================================================== */ --apple-z-base: 0; --apple-z-dropdown: 100; --apple-z-sticky: 200; --apple-z-fixed: 300; --apple-z-modal-backdrop: 400; --apple-z-modal: 500; --apple-z-popover: 600; --apple-z-tooltip: 700; --apple-z-notification: 800; --apple-z-max: 9999; /* ======================================================================== * LAYOUT - DIMENSOES (escaláveis) * ======================================================================== */ /* Header */ --apple-header-height: calc(64px * var(--apple-scale)); --apple-header-height-mobile: calc(56px * var(--apple-scale)); /* Sidebar */ --apple-sidebar-width: calc(260px * var(--apple-scale)); --apple-sidebar-width-collapsed: calc(72px * var(--apple-scale)); --apple-sidebar-width-mobile: calc(280px * var(--apple-scale)); /* Container */ --apple-container-sm: 640px; --apple-container-md: 768px; --apple-container-lg: 1024px; --apple-container-xl: 1280px; --apple-container-2xl: 1440px; /* Content padding */ --apple-content-padding: calc(2rem * var(--apple-scale)); --apple-content-padding-mobile: calc(1rem * var(--apple-scale)); /* ======================================================================== * BLUR E EFEITOS * ======================================================================== */ --apple-blur-sm: blur(4px); --apple-blur-md: blur(8px); --apple-blur-lg: blur(16px); --apple-blur-xl: blur(24px); /* Glassmorphism */ --apple-glass-bg: rgba(255, 255, 255, 0.72); --apple-glass-border: rgba(255, 255, 255, 0.18); --apple-glass-blur: blur(20px); /* ======================================================================== * BREAKPOINTS (para referência em media queries) * ======================================================================== */ /* * --apple-breakpoint-sm: 640px; * --apple-breakpoint-md: 768px; * --apple-breakpoint-lg: 1024px; * --apple-breakpoint-xl: 1280px; * --apple-breakpoint-2xl: 1536px; */ /* ======================================================================== * HIG — LABEL COLORS (semantic text hierarchy) * Source: Apple HIG / UIColor label system * ======================================================================== */ --apple-label: rgba(0, 0, 0, 1); /* primary label */ --apple-label-secondary: rgba(60, 60, 67, 0.6); /* secondary label */ --apple-label-tertiary: rgba(60, 60, 67, 0.3); /* tertiary label */ --apple-label-quaternary: rgba(60, 60, 67, 0.18); /* quaternary label */ /* ======================================================================== * HIG — FILL COLORS (UI element fills, e.g. segmented controls, sliders) * ======================================================================== */ --apple-fill-primary: rgba(120, 120, 128, 0.2); /* primary fill */ --apple-fill-secondary: rgba(120, 120, 128, 0.16); /* secondary fill */ --apple-fill-tertiary: rgba(118, 118, 128, 0.12); /* tertiary fill */ --apple-fill-quaternary: rgba(116, 116, 128, 0.08); /* quaternary fill */ /* ======================================================================== * HIG — SYSTEM BACKGROUNDS * Light-mode values; dark overrides in @media block below * ======================================================================== */ --apple-bg-system-primary: #ffffff; --apple-bg-system-secondary: #f2f2f7; --apple-bg-system-tertiary: #ffffff; --apple-bg-grouped-primary: #f2f2f7; --apple-bg-grouped-secondary: #ffffff; --apple-bg-grouped-tertiary: #f2f2f7; /* ======================================================================== * HIG — SYSTEM TINT COLORS (iOS system palette) * ======================================================================== */ --apple-tint-blue: #007aff; --apple-tint-green: #34c759; --apple-tint-indigo: #5856d6; --apple-tint-orange: #ff9500; --apple-tint-pink: #ff2d55; --apple-tint-purple: #af52de; --apple-tint-red: #ff3b30; --apple-tint-teal: #5ac8fa; --apple-tint-yellow: #ffcc00; /* ======================================================================== * HIG — TEXT STYLE SIZES (exact HIG type scale, non-scaled) * These fixed-px values represent the HIG named text styles. * For scaled UI use --apple-text-* (above) which respect --apple-scale. * ======================================================================== */ --apple-text-large-title: 34px; /* Large Title */ --apple-text-title1: 28px; /* Title 1 */ --apple-text-title2: 22px; /* Title 2 */ --apple-text-title3: 20px; /* Title 3 */ --apple-text-headline: 17px; /* Headline — semibold */ --apple-text-body: 17px; /* Body */ --apple-text-callout: 16px; /* Callout */ --apple-text-subhead: 15px; /* Subheadline */ --apple-text-footnote: 13px; /* Footnote */ --apple-text-caption1: 12px; /* Caption 1 */ --apple-text-caption2: 11px; /* Caption 2 */ /* ======================================================================== * HIG — SPACING (8pt grid) * Apple uses an 8pt base grid. --apple-sp-* are fixed reference values. * For scaled layout values use --apple-space-* (above). * ======================================================================== */ --apple-sp-0: 0px; --apple-sp-1: 4px; /* 0.5 unit — half-grid */ --apple-sp-2: 8px; /* 1 unit */ --apple-sp-3: 12px; /* 1.5 units */ --apple-sp-4: 16px; /* 2 units */ --apple-sp-5: 20px; /* 2.5 units */ --apple-sp-6: 24px; /* 3 units */ --apple-sp-8: 32px; /* 4 units */ --apple-sp-10: 40px; /* 5 units */ --apple-sp-12: 48px; /* 6 units */ --apple-sp-16: 64px; /* 8 units */ --apple-sp-20: 80px; /* 10 units */ --apple-sp-24: 96px; /* 12 units */ /* ======================================================================== * HIG — INTERACTIVE STATES * ======================================================================== */ --apple-interactive-hover: rgba(0, 0, 0, 0.05); --apple-interactive-pressed: rgba(0, 0, 0, 0.10); --apple-interactive-focus: rgba(0, 122, 255, 0.25); /* focus ring */ --apple-interactive-selected: rgba(0, 122, 255, 0.12); --apple-interactive-disabled: rgba(60, 60, 67, 0.30); /* ======================================================================== * HIG — MATERIALS (iOS vibrancy / backdrop layers) * ======================================================================== */ --apple-material-thick: rgba(255, 255, 255, 0.85); --apple-material-regular: rgba(255, 255, 255, 0.72); --apple-material-thin: rgba(255, 255, 255, 0.45); --apple-material-ultrathin: rgba(255, 255, 255, 0.25); --apple-backdrop-blur: saturate(180%) blur(20px); /* ======================================================================== * HIG — BORDER RADIUS (exact HIG component values) * Note: --apple-radius-sm/md/lg/xl/2xl/3xl above are scaled. * These fixed values are the HIG reference constants. * ======================================================================== */ --apple-radius-xs: 4px; /* subtle rounding */ --apple-radius-card: 12px; /* cards */ --apple-radius-modal: 16px; /* sheets / modals */ --apple-radius-sheet: 20px; /* bottom sheets */ --apple-radius-button: 10px; /* buttons */ --apple-radius-input: 8px; /* text fields */ --apple-radius-pill: 999px; /* pill / capsule */ } /* ============================================================================ * DARK MODE — NutriX usa apenas Light Mode (Apple HIG Light). * Dark mode desativado intencionalmente. Não adicionar overrides aqui. * ============================================================================ */