/** * IC-MyHost — Design Tokens * Theme: 202605-daylight * File: theme/202605-daylight/css/tokens.css * * PREVIEW ONLY — Phase 0 * ไฟล์นี้มีแค่ CSS custom properties (ตัวแปร) * ไม่มี selector นอกจาก :root — ไม่ override อะไรของเก่า * โหลดเฉพาะหน้าที่ใช้ indexTheme202605daylight.php เท่านั้น */ :root { /* ───────────────────────────────────── BRAND CORE Navy + Orange ตาม Brand Brief ───────────────────────────────────── */ --ic-navy: #2C3093; /* Primary brand navy */ --ic-navy-dark: #1e2168; /* Hover / deep state */ --ic-navy-light: #3d44b5; /* Active / lighter state */ --ic-orange: #FF9900; /* Primary brand orange */ --ic-orange-dark: #e08600; /* Hover / pressed */ --ic-orange-light: #ffb133; /* Tag / badge */ /* ───────────────────────────────────── SURFACE — Light day-mode base ───────────────────────────────────── */ --ic-bg: #f5f7fc; /* Page background */ --ic-bg-alt: #eef1f8; /* Section alt background */ --ic-surface: #ffffff; /* Card / panel */ --ic-surface-raised:#f9faff; /* Slightly elevated surface */ --ic-border: #dde3f0; /* Default border */ --ic-border-strong: #b8c3de; /* Emphasis border */ /* ───────────────────────────────────── DARK HERO — sections with navy bg (class="dark-hero" on or section) ───────────────────────────────────── */ --ic-hero-bg: #0f1535; /* Hero section bg */ --ic-hero-bg2: #182047; /* Hero gradient stop */ --ic-hero-text: #ffffff; --ic-hero-muted: #a8b4d4; /* ───────────────────────────────────── TEXT ───────────────────────────────────── */ --ic-text: #1a1e3c; /* Primary text */ --ic-text-muted: #5a6488; /* Secondary / caption */ --ic-text-subtle: #8b96bc; /* Placeholder / disabled */ --ic-text-inverse: #ffffff; /* Text on dark bg */ /* ───────────────────────────────────── SOLUTION ACCENTS (1 per IC product) data-accent="guardian|vault|shield|brain|pulse" on ───────────────────────────────────── */ --ic-accent: var(--ic-navy); /* default = brand navy */ --ic-accent-guardian: #3b5bd9; /* IC Guardian — blue */ --ic-accent-guardian-light: #6b85f0; --ic-accent-guardian-bg: #eef1fc; --ic-accent-vault: #138a5e; /* IC Iron Vault — green */ --ic-accent-vault-light: #1fbc82; --ic-accent-vault-bg: #e8f7f2; --ic-accent-shield: #6f4bcf; /* IC WP Shield — purple */ --ic-accent-shield-light: #9575e0; --ic-accent-shield-bg: #f0ebfb; --ic-accent-brain: #c7821b; /* IC Brain — amber */ --ic-accent-brain-light: #e0a040; --ic-accent-brain-bg: #fdf3e3; --ic-accent-pulse: #1f8f9e; /* IC Pulse — teal */ --ic-accent-pulse-light: #2ab5c8; --ic-accent-pulse-bg: #e6f6f8; /* ───────────────────────────────────── SEMANTIC ───────────────────────────────────── */ --ic-success: #16a34a; --ic-success-bg: #dcfce7; --ic-warning: #d97706; --ic-warning-bg: #fef3c7; --ic-error: #dc2626; --ic-error-bg: #fee2e2; --ic-info: #2563eb; --ic-info-bg: #dbeafe; /* ───────────────────────────────────── TYPOGRAPHY Quicksand (Latin) + Prompt (Thai) + Noto Sans SC (CN) ───────────────────────────────────── */ --ic-font: 'Quicksand', 'Prompt', 'Noto Sans SC', sans-serif; --ic-font-mono: 'JetBrains Mono', 'Courier New', monospace; --ic-text-xs: 0.75rem; /* 12px */ --ic-text-sm: 0.875rem; /* 14px */ --ic-text-base: 1rem; /* 16px */ --ic-text-lg: 1.125rem; /* 18px */ --ic-text-xl: 1.25rem; /* 20px */ --ic-text-2xl: 1.5rem; /* 24px */ --ic-text-3xl: 1.875rem; /* 30px */ --ic-text-4xl: 2.25rem; /* 36px */ --ic-text-5xl: 3rem; /* 48px */ --ic-weight-normal: 400; --ic-weight-medium: 500; --ic-weight-semi: 600; --ic-weight-bold: 700; --ic-weight-black: 800; --ic-leading-tight: 1.2; --ic-leading-snug: 1.4; --ic-leading-normal: 1.65; --ic-leading-loose: 1.9; /* ───────────────────────────────────── SPACING (8px grid) ───────────────────────────────────── */ --ic-space-1: 0.25rem; /* 4px */ --ic-space-2: 0.5rem; /* 8px */ --ic-space-3: 0.75rem; /* 12px */ --ic-space-4: 1rem; /* 16px */ --ic-space-6: 1.5rem; /* 24px */ --ic-space-8: 2rem; /* 32px */ --ic-space-10: 2.5rem; /* 40px */ --ic-space-12: 3rem; /* 48px */ --ic-space-16: 4rem; /* 64px */ --ic-space-20: 5rem; /* 80px */ --ic-space-24: 6rem; /* 96px */ /* ───────────────────────────────────── BORDER RADIUS ───────────────────────────────────── */ --ic-radius-sm: 6px; --ic-radius-md: 12px; --ic-radius-lg: 18px; --ic-radius-xl: 24px; --ic-radius-pill: 999px; /* ───────────────────────────────────── SHADOW ───────────────────────────────────── */ --ic-shadow-sm: 0 1px 3px rgba(44,48,147,.08), 0 1px 2px rgba(44,48,147,.06); --ic-shadow-md: 0 4px 16px rgba(44,48,147,.10), 0 2px 6px rgba(44,48,147,.07); --ic-shadow-lg: 0 12px 36px rgba(44,48,147,.14), 0 4px 12px rgba(44,48,147,.08); --ic-shadow-glow: 0 0 0 3px rgba(44,48,147,.18); /* focus ring */ /* ───────────────────────────────────── LAYOUT ───────────────────────────────────── */ --ic-container: 1280px; --ic-nav-h: 72px; /* sticky header height */ --ic-section-v: 96px; /* default section padding-top/bottom */ /* ───────────────────────────────────── TRANSITION ───────────────────────────────────── */ --ic-ease: cubic-bezier(0.4, 0, 0.2, 1); --ic-ease-out: cubic-bezier(0, 0, 0.2, 1); --ic-duration-fast: 150ms; --ic-duration-base: 250ms; --ic-duration-slow: 400ms; } /* end :root */ /* ───────────────────────────────────────────────────── Accent injection — per-solution body[data-accent] สลับ --ic-accent ให้ตรง product เมื่อ body ถูก set (ทำ 1 ครั้ง ใช้ได้ทุก component ที่อ้าง var(--ic-accent)) ───────────────────────────────────────────────────── */ body[data-accent="guardian"] { --ic-accent: var(--ic-accent-guardian); --ic-accent-light: var(--ic-accent-guardian-light); --ic-accent-bg: var(--ic-accent-guardian-bg); } body[data-accent="vault"] { --ic-accent: var(--ic-accent-vault); --ic-accent-light: var(--ic-accent-vault-light); --ic-accent-bg: var(--ic-accent-vault-bg); } body[data-accent="shield"] { --ic-accent: var(--ic-accent-shield); --ic-accent-light: var(--ic-accent-shield-light); --ic-accent-bg: var(--ic-accent-shield-bg); } body[data-accent="brain"] { --ic-accent: var(--ic-accent-brain); --ic-accent-light: var(--ic-accent-brain-light); --ic-accent-bg: var(--ic-accent-brain-bg); } body[data-accent="pulse"] { --ic-accent: var(--ic-accent-pulse); --ic-accent-light: var(--ic-accent-pulse-light); --ic-accent-bg: var(--ic-accent-pulse-bg); }