/* ============================================================================ Sprafo Design System — Foundation / Token Layer ---------------------------------------------------------------------------- Direction: "Sprafo Premium Academic SaaS + Modern German Exam Workspace" SAFE BY DESIGN. This file is a TOKEN + OPT-IN helper layer only. - It declares CSS custom properties on :root (harmless until referenced). - It adds a few OPT-IN helper classes, all prefixed `.sf-` (apply only when you add the class). - It does NOT restyle any existing element, tag, or legacy class. - It does NOT redefine legacy tokens (--dl-*, --t1-*, --level-*, --brand-*), so current page appearance is unchanged. Future UI tasks should consume `--sf-*` tokens (and the `.sf-` helpers) instead of hard-coding values. See docs/SPRAFO_DESIGN_SYSTEM.md. ============================================================================ */ :root { /* ---- Brand / primary (deep academic indigo-blue) -------------------- */ --sf-primary: #1d4ed8; /* buttons, links, active states */ --sf-primary-strong: #1e3a8a; /* hover / pressed / gradient end */ --sf-primary-soft: #dbeafe; /* soft fills, selected backgrounds */ --sf-primary-tint: #eff6ff; /* very light section / hover wash */ --sf-primary-contrast: #ffffff; /* text on primary surfaces */ /* Legacy brand bridge: existing site primary is #0056b3. New work uses --sf-primary. Keep them harmonised; do not introduce a 3rd blue. */ --sf-primary-legacy: #0056b3; /* ---- Accent (refined amber, harmonises with legacy #ffc107) --------- */ --sf-accent: #f59e0b; --sf-accent-strong: #b45309; --sf-accent-soft: #fef3c7; --sf-accent-contrast: #1f2937; /* ---- Semantic answer / status states -------------------------------- */ /* Aligned with legacy --t1-success* / --t1-danger* families. */ --sf-success: #16a34a; --sf-success-strong: #166534; --sf-success-soft: #dcfce7; --sf-success-border: #86efac; --sf-success-text: #166534; --sf-error: #dc2626; --sf-error-strong: #991b1b; --sf-error-soft: #fee2e2; --sf-error-border: #fca5a5; --sf-error-text: #991b1b; --sf-warning: #d97706; --sf-warning-soft: #fef3c7; --sf-warning-text: #92400e; --sf-info: #0ea5e9; --sf-info-soft: #e0f2fe; --sf-info-text: #075985; /* Exercise answer-state semantics (map onto the states above) */ --sf-answer-correct: var(--sf-success); --sf-answer-correct-bg: var(--sf-success-soft); --sf-answer-wrong: var(--sf-error); --sf-answer-wrong-bg: var(--sf-error-soft); --sf-answer-selected: var(--sf-primary); --sf-answer-selected-bg: var(--sf-primary-soft); --sf-answer-unanswered: #94a3b8; --sf-answer-unanswered-bg:#f1f5f9; /* ---- Neutrals (single cool slate family) ---------------------------- */ --sf-bg: #f6f8fb; /* app / page background (soft slate) */ --sf-bg-subtle: #eef2f7; /* alternating section / subtle panel */ --sf-surface: #ffffff; /* cards / panels */ --sf-surface-muted: #f8fafc; /* muted inner surface */ --sf-text: #0f172a; /* primary text (slate-900) */ --sf-text-muted: #475569; /* secondary text (slate-600) */ --sf-text-subtle: #64748b; /* captions / helper (slate-500) */ --sf-text-invert: #f8fafc; /* text on dark surfaces */ --sf-border: #e2e8f0; /* default borders (slate-200) */ --sf-border-strong: #cbd5e1; /* emphasised borders (slate-300) */ /* ---- Typography ----------------------------------------------------- */ /* RTL-safe, self-contained system stacks (no external font install). Arabic renders through Segoe UI / system fonts already used site-wide. */ --sf-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Arabic", Tahoma, sans-serif; --sf-font-reading: Georgia, "Times New Roman", "Noto Serif", serif; /* passages */ --sf-font-mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; /* numbers / timers */ /* Type scale (fluid-friendly, rem based on 16px root) */ --sf-text-xs: 0.75rem; /* 12px labels, captions */ --sf-text-sm: 0.875rem; /* 14px helper, meta */ --sf-text-base: 1rem; /* 16px body (never below this) */ --sf-text-lg: 1.125rem; /* 18px lead body */ --sf-text-xl: 1.375rem; /* 22px card titles */ --sf-text-2xl: 1.75rem; /* 28px section headings */ --sf-text-3xl: 2.25rem; /* 36px page titles */ --sf-text-4xl: 3rem; /* 48px hero (desktop) */ --sf-weight-regular: 400; --sf-weight-medium: 500; --sf-weight-semibold: 600; --sf-weight-bold: 700; --sf-leading-tight: 1.15; /* display / headlines */ --sf-leading-snug: 1.35; /* subheads */ --sf-leading-normal: 1.6; /* body */ --sf-leading-reading: 1.8; /* long reading passages */ --sf-tracking-tight: -0.02em; /* large headlines */ --sf-tracking-normal: 0; --sf-tracking-wide: 0.06em; /* small caps / eyebrows */ --sf-measure: 68ch; /* max readable line length */ /* ---- Spacing scale (4px base) --------------------------------------- */ --sf-space-1: 0.25rem; /* 4px */ --sf-space-2: 0.5rem; /* 8px */ --sf-space-3: 0.75rem; /* 12px */ --sf-space-4: 1rem; /* 16px */ --sf-space-5: 1.5rem; /* 24px */ --sf-space-6: 2rem; /* 32px */ --sf-space-7: 3rem; /* 48px */ --sf-space-8: 4rem; /* 64px */ --sf-space-9: 6rem; /* 96px */ /* Layout */ --sf-container: 1200px; /* content max-width */ --sf-container-wide: 1400px; /* marketing max-width */ --sf-gutter: 1.5rem; /* ---- Radii (soft-consistent scale) ---------------------------------- */ --sf-radius-sm: 0.375rem; /* 6px inputs, chips */ --sf-radius-md: 0.625rem; /* 10px buttons */ --sf-radius-lg: 0.875rem; /* 14px cards / panels */ --sf-radius-xl: 1.25rem; /* 20px hero / large surfaces */ --sf-radius-pill: 999px; /* pills / badges */ /* ---- Borders -------------------------------------------------------- */ --sf-border-width: 1px; --sf-border-width-strong: 2px; /* ---- Shadows (tinted to slate, not pure black) ---------------------- */ --sf-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --sf-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.07); --sf-shadow-md: 0 6px 20px rgba(15, 23, 42, 0.09); --sf-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12); --sf-shadow-focus: 0 0 0 3px rgba(29, 78, 216, 0.28); /* focus ring halo */ /* ---- Motion --------------------------------------------------------- */ --sf-duration-fast: 120ms; --sf-duration-base: 200ms; --sf-duration-slow: 320ms; --sf-ease-standard: cubic-bezier(0.2, 0, 0, 1); --sf-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ---- Z-index scale (aligned with legacy --z-* values) --------------- */ --sf-z-base: 1; --sf-z-content: 1; --sf-z-sticky: 100; --sf-z-sidebar: 200; --sf-z-header: 300; --sf-z-dropdown: 1055; /* matches Bootstrap / legacy --z-dropdown */ --sf-z-overlay: 1060; --sf-z-modal: 1070; --sf-z-toast: 1090; /* ---- Subscriber / Gold accent ---- */ --sf-gold: #d97706; --sf-gold-strong: #b45309; --sf-gold-soft: #fef3c7; --sf-gold-border: #fcd34d; --sf-gold-contrast: #1c1204; /* ---- Plan accent palette ---- */ --sf-plan-gold: #d97706; --sf-plan-purple: #7c3aed; --sf-plan-blue: #1d4ed8; --sf-plan-emerald: #059669; --sf-plan-rose: #e11d48; --sf-plan-amber: #d97706; /* ---- Form control system ---- */ --sf-control-h: 44px; --sf-control-h-lg: 48px; --sf-control-pad-x: 0.875rem; --sf-control-pad-y: 0.625rem; --sf-input-bg: #ffffff; --sf-input-border: #cbd5e1; --sf-input-border-hover: #94a3b8; --sf-input-border-focus: #1d4ed8; --sf-input-placeholder: #94a3b8; --sf-input-disabled-bg: #f1f5f9; --sf-input-readonly-bg: #f8fafc; /* ---- Checkbox / Radio system ---- */ --sf-check-size: 20px; --sf-check-radius: 5px; --sf-check-color: #1d4ed8; --sf-check-check: #ffffff; /* ---- Focus rings ---- */ --sf-focus-shadow: 0 0 0 3px rgba(29, 78, 216, 0.25); --sf-focus-shadow-danger: 0 0 0 3px rgba(220, 38, 38, 0.25); /* ---- Avatar ring gradient ---- */ --sf-avatar-ring-start: #7c3aed; --sf-avatar-ring-mid: #1d4ed8; --sf-avatar-ring-end: #0ea5e9; } /* ============================================================================ OPT-IN HELPERS — apply only when you add the class. No global side effects. ============================================================================ */ /* Readable measure for long-form / reading passages */ .sf-measure { max-width: var(--sf-measure); } /* Balanced / pretty wrapping for headings and lead text */ .sf-balance { text-wrap: balance; } .sf-pretty { text-wrap: pretty; } /* Tabular numbers for timers, scores, counters */ .sf-tabular { font-variant-numeric: tabular-nums; font-family: var(--sf-font-mono); } /* Centered content container */ .sf-container { width: 100%; max-width: var(--sf-container); margin-inline: auto; padding-inline: var(--sf-gutter); } .sf-container--wide { max-width: var(--sf-container-wide); } /* Consistent, accessible focus ring (opt-in) */ .sf-focus-ring:focus-visible { outline: none; box-shadow: var(--sf-shadow-focus); border-radius: var(--sf-radius-sm); } /* Card surface primitive (opt-in) */ .sf-card { background: var(--sf-surface); border: var(--sf-border-width) solid var(--sf-border); border-radius: var(--sf-radius-lg); box-shadow: var(--sf-shadow-sm); } /* Subtle hover lift for interactive surfaces (opt-in) */ .sf-lift { transition: transform var(--sf-duration-base) var(--sf-ease-out), box-shadow var(--sf-duration-base) var(--sf-ease-out); } .sf-lift:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow-md); } .sf-lift:active { transform: translateY(0); } /* Reduced-motion respect for OPT-IN helpers only (scoped to .sf-lift) */ @media (prefers-reduced-motion: reduce) { .sf-lift { transition: none; } .sf-lift:hover { transform: none; } }