/* assets/css/tokens.css * ───────────────────────────────────────────────────────────────────────────── * سیستم دیزاین میدونیتو (Midonito / Nito) * Ported verbatim from the Claude Design project "سیستم دیزاین Midonito Talent". * Palette: Blue-Purple × Charcoal × Orange. * * This file is the single source of truth for color, type, spacing and effects. * It is loaded on EVERY page (includes/header.php) before style.css and * luxury.css, both of which alias their legacy variable names onto these tokens. * Do not hardcode hexes in pages — reach for a token. * ───────────────────────────────────────────────────────────────────────────── */ /* ═══════════════ Type — Vazirmatn ═══════════════ */ @import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800;900&display=swap"); :root { /* ——— base palette (verbatim brand hexes) ——— */ --color-purple-500: #5B4B9E; /* Light Purple-Blue — Highlight */ --color-navy-500: #2E3A87; /* Main Navy-Blue — Primary Body */ --color-deep-500: #3B2E6E; /* Deep Purple-Blue — Shadow/Depth */ --color-ink: #1A1A1A; /* Charcoal Black — Outline */ --color-charcoal: #242427; /* Soft Charcoal — Dark Background */ --color-orange-500: #F59C16; /* Main Orange — Beak/Accent */ --color-orange2-500:#E8720B; /* Warm Orange — Contrast/Detail */ --color-green-500: #0C3D2E; /* Deep Forest Green — brand stripe */ --color-white: #FFFFFF; /* ——— tonal ramps (OKLCH mixes off each 500 base) ——— */ --color-navy-100: color-mix(in oklch, var(--color-navy-500), white 90%); --color-navy-200: color-mix(in oklch, var(--color-navy-500), white 74%); --color-navy-300: color-mix(in oklch, var(--color-navy-500), white 52%); --color-navy-400: color-mix(in oklch, var(--color-navy-500), white 26%); --color-navy-600: color-mix(in oklch, var(--color-navy-500), black 14%); --color-navy-700: color-mix(in oklch, var(--color-navy-500), black 30%); --color-navy-800: color-mix(in oklch, var(--color-navy-500), black 48%); --color-navy-900: color-mix(in oklch, var(--color-navy-500), black 64%); --color-purple-100: color-mix(in oklch, var(--color-purple-500), white 90%); --color-purple-200: color-mix(in oklch, var(--color-purple-500), white 74%); --color-purple-300: color-mix(in oklch, var(--color-purple-500), white 52%); --color-purple-400: color-mix(in oklch, var(--color-purple-500), white 26%); --color-purple-600: color-mix(in oklch, var(--color-purple-500), black 14%); --color-purple-700: color-mix(in oklch, var(--color-purple-500), black 30%); --color-purple-800: color-mix(in oklch, var(--color-purple-500), black 48%); --color-purple-900: color-mix(in oklch, var(--color-purple-500), black 64%); --color-deep-100: color-mix(in oklch, var(--color-deep-500), white 90%); --color-deep-200: color-mix(in oklch, var(--color-deep-500), white 74%); --color-deep-300: color-mix(in oklch, var(--color-deep-500), white 52%); --color-deep-400: color-mix(in oklch, var(--color-deep-500), white 26%); --color-deep-600: color-mix(in oklch, var(--color-deep-500), black 14%); --color-deep-700: color-mix(in oklch, var(--color-deep-500), black 30%); --color-deep-800: color-mix(in oklch, var(--color-deep-500), black 48%); --color-deep-900: color-mix(in oklch, var(--color-deep-500), black 64%); --color-orange-100: color-mix(in oklch, var(--color-orange-500), white 88%); --color-orange-200: color-mix(in oklch, var(--color-orange-500), white 70%); --color-orange-300: color-mix(in oklch, var(--color-orange-500), white 48%); --color-orange-400: color-mix(in oklch, var(--color-orange-500), white 24%); --color-orange-600: color-mix(in oklch, var(--color-orange-500), black 12%); --color-orange-700: color-mix(in oklch, var(--color-orange-500), black 28%); --color-orange-800: color-mix(in oklch, var(--color-orange-500), black 46%); --color-orange-900: color-mix(in oklch, var(--color-orange-500), black 62%); --color-orange2-100: color-mix(in oklch, var(--color-orange2-500), white 88%); --color-orange2-300: color-mix(in oklch, var(--color-orange2-500), white 48%); --color-orange2-600: color-mix(in oklch, var(--color-orange2-500), black 12%); --color-orange2-700: color-mix(in oklch, var(--color-orange2-500), black 28%); --color-green-100: color-mix(in oklch, var(--color-green-500), white 90%); --color-green-300: color-mix(in oklch, var(--color-green-500), white 52%); --color-green-400: color-mix(in oklch, var(--color-green-500), white 26%); --color-green-600: color-mix(in oklch, var(--color-green-500), black 16%); --color-neutral-100: color-mix(in oklch, var(--color-charcoal), white 94%); --color-neutral-200: color-mix(in oklch, var(--color-charcoal), white 86%); --color-neutral-300: color-mix(in oklch, var(--color-charcoal), white 72%); --color-neutral-400: color-mix(in oklch, var(--color-charcoal), white 52%); --color-neutral-500: color-mix(in oklch, var(--color-charcoal), white 34%); --color-neutral-600: color-mix(in oklch, var(--color-charcoal), white 20%); --color-neutral-700: color-mix(in oklch, var(--color-charcoal), white 10%); --color-neutral-800: var(--color-charcoal); --color-neutral-900: var(--color-ink); /* ——— semantic aliases ——— */ --color-bg: #F6F6F9; /* light bluish ground */ --color-surface: var(--color-white); --color-surface-tint: var(--color-navy-100); --color-surface-dark: var(--color-charcoal); /* dark sections */ --color-text: var(--color-ink); --color-text-2: var(--color-neutral-600); /* secondary copy */ --color-text-3: var(--color-neutral-500); /* captions/placeholders */ --color-text-inverse: var(--color-white); --color-heading: var(--color-navy-700); --color-primary: var(--color-navy-500); --color-primary-hover: var(--color-navy-600); --color-primary-press: var(--color-navy-700); --color-accent: var(--color-orange-500); /* CTA — pair with ink text */ --color-accent-hover: var(--color-orange2-500); --color-accent-press: var(--color-orange2-600); --color-highlight: var(--color-purple-500); /* links, selection, focus */ --color-border: var(--color-neutral-200); --color-border-strong: var(--color-neutral-300); --color-outline: var(--color-ink); --color-focus: var(--color-purple-500); --color-success: var(--color-green-400); --color-danger: #C0392B; /* derived, errors only */ /* ——— brand gradients & stripes ——— */ --gradient-depth: linear-gradient(105deg, var(--color-purple-500), var(--color-navy-500) 55%, var(--color-deep-500)); --gradient-accent: linear-gradient(105deg, var(--color-orange-500), var(--color-orange2-500)); --stripe-1: var(--color-orange-500); --stripe-2: var(--color-green-500); --stripe-3: var(--color-white); /* ═══════════════ Typography ═══════════════ */ --font-body: "Vazirmatn", "IRANSans", "Segoe UI", Tahoma, system-ui, sans-serif; --font-heading: var(--font-body); --text-display-size: 2.5rem; --text-display-weight: 900; --text-display-line: 1.45; --text-h1-size: 2rem; --text-h1-weight: 800; --text-h1-line: 1.5; --text-h2-size: 1.5rem; --text-h2-weight: 800; --text-h2-line: 1.55; --text-h3-size: 1.25rem; --text-h3-weight: 700; --text-h3-line: 1.6; --text-body-size: 1rem; --text-body-weight: 400; --text-body-line: 1.9; --text-sm-size: 0.875rem; --text-sm-weight: 400; --text-sm-line: 1.8; --text-caption-size: 0.75rem; --text-caption-weight: 500; --text-caption-line: 1.6; --text-kicker-size: 0.8125rem; --text-kicker-weight: 700; /* pill kicker above headings */ /* ═══════════════ Spacing (4px scale) ═══════════════ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --container: 1140px; --container-narrow: 640px; /* form/card column */ /* ═══════════════ Radius / elevation / motion ═══════════════ */ --radius-sm: 8px; /* inputs, tags */ --radius-md: 12px; /* buttons */ --radius-lg: 20px; /* cards */ --radius-xl: 28px; /* hero panels, dialogs */ --radius-pill: 999px; /* navy-tinted soft elevation */ --shadow-sm: 0 1px 3px rgba(46, 58, 135, 0.10); --shadow-md: 0 6px 18px rgba(46, 58, 135, 0.14); --shadow-lg: 0 16px 40px rgba(46, 58, 135, 0.20); --shadow-accent: 0 8px 22px rgba(245, 156, 22, 0.35); /* under orange CTA */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur: 200ms; } ::selection { background: var(--color-purple-200); color: var(--color-deep-700); } /* Focus ring — purple, never the browser blue. */ :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* ═══════════════ Brand stripe ═══════════════ Thin identity band (orange / forest green / white) sitting above the header. */ .brand-stripe { display: grid; grid-template-rows: 4px 4px 4px; } .brand-stripe span { display: block; } .brand-stripe span:nth-child(1) { background: var(--stripe-1); } .brand-stripe span:nth-child(2) { background: var(--stripe-2); } .brand-stripe span:nth-child(3) { background: var(--stripe-3); }