/** * 1-tokens.css — Design Tokens * ============================================================ * Single source of truth for ALL design values. * * COLOR TOKENS are mapped from --isms-* variables which are * injected dynamically by PHP (SchoolSettings::renderCssVariables()). * The fallback values are the system defaults. * * NEVER hardcode a hex color in any other CSS file. * NEVER use --isms-* variables directly in components. * Always use var(--color-*), var(--shadow-*), var(--radius-*), etc. * ============================================================ */ :root { /* -------------------------------------------------------- * COLOR — Brand (mapped from dynamic DB theme variables) * -------------------------------------------------------- */ --color-primary: var(--isms-primary, #1e3a8a); --color-secondary: var(--isms-secondary, #0ea5e9); --color-accent: var(--isms-accent, #f59e0b); --color-success: var(--isms-success, #10b981); --color-warning: var(--isms-warning, #f59e0b); --color-danger: var(--isms-danger, #ef4444); /* -------------------------------------------------------- * COLOR — Layout surfaces (mapped from DB) * -------------------------------------------------------- */ --color-header-bg: var(--isms-header-bg, #ffffff); --color-sidebar-bg: var(--isms-sidebar-bg, #ffffff); --color-body-bg: var(--isms-body-bg, #f8f9fa); /* -------------------------------------------------------- * COLOR — Text (mapped from DB) * -------------------------------------------------------- */ --color-text-primary: var(--isms-text-primary, #1e3a8a); --color-text-secondary: var(--isms-text-secondary, #6b7280); /* Fixed text/border tokens (were referenced by module css but never defined, silently falling back to inherited values). */ --color-text: #1e293b; --color-text-muted: #64748b; --color-border: #e2e8f0; /* -------------------------------------------------------- * GRADIENTS (mapped from DB) * -------------------------------------------------------- */ --gradient-primary: var(--isms-gradient-primary, linear-gradient(135deg, #1e3a8a, #0ea5e9)); /* -------------------------------------------------------- * COLOR — Neutral / Grays (static — not theme-dependent) * -------------------------------------------------------- */ --color-white: #ffffff; --color-gray-50: #f8fafc; --color-gray-100: #f1f5f9; --color-gray-200: #e2e8f0; --color-gray-300: #cbd5e1; --color-gray-400: #94a3b8; --color-gray-500: #64748b; --color-gray-600: #6b7280; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #1e293b; /* -------------------------------------------------------- * COLOR — Semantic surface tints (static) * -------------------------------------------------------- */ --color-success-bg: #d1fae5; --color-success-text: #065f46; --color-warning-bg: #fef3c7; --color-warning-text: #92400e; --color-danger-bg: #fee2e2; --color-danger-text: #991b1b; --color-info-bg: #e0f2fe; --color-info-text: #0369a1; /* -------------------------------------------------------- * COLOR — Accent palette (static, decorative) * Section/launcher accent hues. Consumed via the .accent-* * helper classes (see cards.css) which set --accent, which in * turn drives .module-card.is-accent borders and .btn-accent. * Same values in light & dark — vivid hues read on both. * -------------------------------------------------------- */ --accent-green: #0d9488; --accent-blue: #2563eb; --accent-purple: #7c3aed; --accent-amber: #d97706; --accent-red: #ef4444; --accent-cyan: #06b6d4; --accent-indigo: #6366f1; --accent-pink: #db2777; --accent-teal: #14b8a6; --accent-orange: #f97316; --accent-slate: #64748b; /* -------------------------------------------------------- * TYPOGRAPHY — Font Family * Inter is the system UI font (tall x-height + tabular figures * read well at the small sizes used across the app). Loaded * globally in includes/header.php. Falls back to the OS UI font. * -------------------------------------------------------- */ --font-family-base: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-family-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace; /* -------------------------------------------------------- * TYPOGRAPHY — Font Sizes * -------------------------------------------------------- */ --text-2xs: 9px; --text-xs: 10px; --text-sm: 11px; --text-base: 12px; --text-md: 13px; --text-lg: 14px; --text-xl: 15px; --text-2xl: 16px; --text-3xl: 18px; --text-4xl: 20px; /* -------------------------------------------------------- * TYPOGRAPHY — Font Weights * -------------------------------------------------------- */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* -------------------------------------------------------- * TYPOGRAPHY — Line Height * -------------------------------------------------------- */ --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.5; /* -------------------------------------------------------- * SPACING (used for padding, margin, gap) * -------------------------------------------------------- */ --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 10px; --space-5: 12px; --space-6: 14px; --space-7: 16px; --space-8: 20px; --space-9: 24px; --space-10: 32px; /* -------------------------------------------------------- * BORDER RADIUS * -------------------------------------------------------- */ --radius-sm: 6px; /* inputs, buttons */ --radius-md: 8px; /* alerts, dropdowns */ --radius-lg: 10px; /* cards, form sections */ --radius-xl: 12px; /* profile cards */ --radius-pill: 20px; /* breadcrumbs, tags, pills */ --radius-full: 50%; /* avatars, logos */ /* -------------------------------------------------------- * SHADOWS * -------------------------------------------------------- */ --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.10); --shadow-xl: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-primary: 0 6px 12px rgba(14, 165, 233, 0.30); --shadow-logo: 0 2px 8px rgba(30, 58, 138, 0.25); /* -------------------------------------------------------- * LAYOUT — Page structure dimensions * -------------------------------------------------------- */ --header-height: 56px; --sidebar-width: 200px; --content-padding: 12px; /* -------------------------------------------------------- * TRANSITIONS * -------------------------------------------------------- */ --transition-fast: all 0.15s ease; --transition-base: all 0.3s ease; /* -------------------------------------------------------- * Z-INDEX SCALE * -------------------------------------------------------- */ --z-sidebar: 900; --z-header: 1000; --z-dropdown: 1050; --z-modal: 1055; --z-modal-popover: 1060; /* body-appended overlays that must sit above an open modal */ --z-toast: 1100; /* -------------------------------------------------------- * BORDERS * -------------------------------------------------------- */ --border-color: var(--color-gray-200); --border-color-light: var(--color-gray-100); --border-width: 1px; /* -------------------------------------------------------- * SURFACES (used for card/panel backgrounds — override in dark mode) * -------------------------------------------------------- */ --color-surface: #ffffff; --color-surface-alt: var(--color-gray-50); /* -------------------------------------------------------- * COLOR — Locked / Restricted state * -------------------------------------------------------- */ --color-locked-bg: #fce7f3; --color-locked-text: #9d174d; --color-locked-border: #fbcfe8; } /* ============================================================ * GLOBAL — Password mask sizing * ------------------------------------------------------------ * Inter renders the password mask bullet (•) larger than the * old default font did, so masked fields showed oversized dots * after the font switch. Cap the masked input at --text-base so * the dots read at a normal size everywhere. Placeholder text * keeps its inherited size; when the eye toggle reveals the * value the type flips to "text" and it returns to full size. * Loaded on every page (tokens layer), so it applies system-wide. * ============================================================ */ input[type="password"].form-control { font-size: var(--text-base); } input[type="password"].form-control::placeholder { font-size: var(--text-lg); }