/* ═══════════════════════════════════════════════════════════════ ThaiChat · Design Tokens v4 — iOS / Apple aesthetic Compatible with existing pages: drop in via , no JS needed. USAGE ───── • data-brand = "sunset" | "ocean" | "forest" | "lavender" | "rose" | "amber" | "sapphire" | "mint" | "graphite" | "mocha" • data-theme = "" (light, default) | "dark" The iOS "chrome" (page bg, glass, hairlines, fills) stays identical across themes. Only --tc-brand-* + the channel-tint vars swap. ═══════════════════════════════════════════════════════════════ */ :root { /* ── iOS chrome (light) ───────────────────────────────── */ --tc-bg-base: #F2F2F7; /* systemGroupedBackground */ --tc-bg-elev: #FFFFFF; /* secondarySystemBackground */ --tc-bg-glass: rgba(255,255,255,.88); /* nav / sidebar */ --tc-bg-glass-strong: rgba(255,255,255,.94); --tc-bg-glass-thin: rgba(255,255,255,.72); --tc-fill-1: rgba(118,118,128,.08); /* iOS systemFill ultra-thin */ --tc-fill-2: rgba(118,118,128,.12); /* iOS systemFill */ --tc-fill-3: rgba(118,118,128,.18); --tc-text-1: #1c1c1e; /* primary label */ --tc-text-2: rgba(60,60,67,.65); /* secondary */ --tc-text-3: rgba(60,60,67,.5); /* tertiary */ --tc-text-4: rgba(60,60,67,.3); /* quaternary / placeholder */ --tc-line-1: rgba(0,0,0,.07); /* hairline */ --tc-line-2: rgba(0,0,0,.12); /* divider */ --tc-line-3: rgba(0,0,0,.04); /* faintest */ /* ── Status colors (Apple system colors) ──────────────── */ --tc-ok: #34C759; /* systemGreen */ --tc-info: #007AFF; /* systemBlue */ --tc-warn: #FF9F0A; /* systemOrange */ --tc-bad: #FF3B30; /* systemRed */ --tc-purple:#AF52DE; --tc-pink: #FF2D55; --tc-teal: #5AC8FA; /* ── Glass blur / shadow ──────────────────────────────── */ --tc-blur: saturate(200%) blur(24px); --tc-blur-light: saturate(180%) blur(12px); --tc-sh-1: 0 1px 2px rgba(0,0,0,.04), 0 0 0 .5px rgba(0,0,0,.04); --tc-sh-2: 0 2px 8px rgba(0,0,0,.06), 0 0 0 .5px rgba(0,0,0,.05); --tc-sh-3: 0 8px 32px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.06); --tc-sh-4: 0 24px 80px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.06); /* ── Radii ─────────────────────────────────────────────── */ --tc-r-1: 8px; --tc-r-2: 10px; --tc-r-3: 12px; --tc-r-4: 14px; --tc-r-5: 16px; --tc-r-6: 20px; --tc-r-7: 22px; --tc-r-full: 9999px; /* ── Type ──────────────────────────────────────────────── */ --tc-font: 'IBM Plex Sans Thai','Sarabun','Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; --tc-font-display: 'IBM Plex Sans Thai','Sarabun', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; --tc-font-mono: ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace; /* ── Channel colors (LINE / IG / FB / Web) — fixed brand truth ── */ --tc-line: #06C755; --tc-ig: #E1306C; --tc-fb: #1877F2; --tc-web: var(--tc-brand-500); /* ── Default brand (Sunset) — overridden by [data-brand] ── */ --tc-brand-50: #fff8f3; --tc-brand-100: #fdecd9; --tc-brand-200: #fbdab9; --tc-brand-300: #f7c193; --tc-brand-400: #f0a876; --tc-brand-500: #E8956B; --tc-brand-600: #d9774e; --tc-brand-700: #c25f37; --tc-brand-800: #8d4527; --tc-brand-grad: linear-gradient(145deg, #E8956B, #f0a876); --tc-brand-grad-strong: linear-gradient(135deg, #d4734a 0%, #E8956B 48%, #F5B887 100%); --tc-brand-glow: 0 4px 16px rgba(232,149,107,.4); --tc-brand-glow-sm: 0 2px 8px rgba(232,149,107,.35); --tc-brand-tint: rgba(232,149,107,.12); /* active bg */ --tc-brand-tint-2: rgba(232,149,107,.08); --tc-brand-tint-strong: rgba(232,149,107,.18); --tc-brand-on-tint: #C96B3A; /* readable text on brand tint */ } /* ═══════════════════════════════════════════════════════════════ DARK MODE — iOS chrome only (theme colors stay the same) ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --tc-bg-base: #1c1c1e; --tc-bg-elev: #2c2c2e; --tc-bg-glass: rgba(28,28,30,.92); --tc-bg-glass-strong: rgba(28,28,30,.96); --tc-bg-glass-thin: rgba(44,44,46,.6); --tc-fill-1: rgba(118,118,128,.2); --tc-fill-2: rgba(118,118,128,.28); --tc-fill-3: rgba(118,118,128,.36); --tc-text-1: #ffffff; --tc-text-2: rgba(235,235,245,.6); --tc-text-3: rgba(235,235,245,.45); --tc-text-4: rgba(235,235,245,.25); --tc-line-1: rgba(255,255,255,.06); --tc-line-2: rgba(255,255,255,.12); --tc-line-3: rgba(255,255,255,.04); --tc-sh-1: 0 1px 2px rgba(0,0,0,.4), 0 0 0 .5px rgba(255,255,255,.04); --tc-sh-2: 0 4px 14px rgba(0,0,0,.4), 0 0 0 .5px rgba(255,255,255,.05); --tc-sh-3: 0 8px 32px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.06); --tc-sh-4: 0 24px 80px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.06); color-scheme: dark; } /* ═══════════════════════════════════════════════════════════════ 10 BRAND THEMES — swap brand palette only each: 50 / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 plus: grad, grad-strong, glow, glow-sm, tint, tint-2, tint-strong, on-tint ═══════════════════════════════════════════════════════════════ */ /* 1 · SUNSET (default) — already set on :root */ [data-brand="sunset"] { --tc-brand-50:#fff8f3; --tc-brand-100:#fdecd9; --tc-brand-200:#fbdab9; --tc-brand-300:#F0C49A; --tc-brand-400:#EAA577; --tc-brand-500:#E8956B; --tc-brand-600:#D27A4F; --tc-brand-700:#B0603A; --tc-brand-800:#82452A; --tc-brand-grad: linear-gradient(145deg,#E8956B,#EAA577); --tc-brand-grad-strong: linear-gradient(135deg,#D27A4F 0%,#E8956B 48%,#F0C49A 100%); --tc-brand-glow: 0 4px 16px rgba(232,149,107,.4); --tc-brand-glow-sm: 0 3px 12px rgba(232,149,107,.38); --tc-brand-tint: rgba(232,149,107,.12); --tc-brand-tint-2: rgba(232,149,107,.08); --tc-brand-tint-strong: rgba(232,149,107,.18); --tc-brand-on-tint: #C06830; } [data-brand="sunset"][data-theme="dark"] { --tc-brand-on-tint: #F0C49A; } /* 2 · OCEAN — calm blue */ [data-brand="ocean"] { --tc-brand-50:#f0f6fc; --tc-brand-100:#dcebf7; --tc-brand-200:#bfdaef; --tc-brand-300:#A8CCEF; --tc-brand-400:#7AB2E0; --tc-brand-500:#5B9BD5; --tc-brand-600:#4A87BE; --tc-brand-700:#3a6fa0; --tc-brand-800:#2b5680; --tc-brand-grad: linear-gradient(145deg,#5B9BD5,#7AB2E0); --tc-brand-grad-strong: linear-gradient(135deg,#4A87BE 0%,#5B9BD5 48%,#A8CCEF 100%); --tc-brand-glow: 0 4px 16px rgba(91,155,213,.4); --tc-brand-glow-sm: 0 3px 12px rgba(91,155,213,.38); --tc-brand-tint: rgba(91,155,213,.12); --tc-brand-tint-2: rgba(91,155,213,.08); --tc-brand-tint-strong: rgba(91,155,213,.18); --tc-brand-on-tint: #2B6FAA; } [data-brand="ocean"][data-theme="dark"] { --tc-brand-on-tint: #A8CCEF; } /* 3 · FOREST — natural green */ [data-brand="forest"] { --tc-brand-50:#f1f8f3; --tc-brand-100:#dcefe1; --tc-brand-200:#bfe0c8; --tc-brand-300:#A2CCA9; --tc-brand-400:#73B281; --tc-brand-500:#5C9E6B; --tc-brand-600:#4D855A; --tc-brand-700:#3d6e49; --tc-brand-800:#2f5639; --tc-brand-grad: linear-gradient(145deg,#5C9E6B,#73B281); --tc-brand-grad-strong: linear-gradient(135deg,#4D855A 0%,#5C9E6B 48%,#A2CCA9 100%); --tc-brand-glow: 0 4px 16px rgba(92,158,107,.4); --tc-brand-glow-sm: 0 3px 12px rgba(92,158,107,.38); --tc-brand-tint: rgba(92,158,107,.12); --tc-brand-tint-2: rgba(92,158,107,.08); --tc-brand-tint-strong: rgba(92,158,107,.18); --tc-brand-on-tint: #2F7040; } [data-brand="forest"][data-theme="dark"] { --tc-brand-on-tint: #A2CCA9; } /* 4 · LAVENDER — soft purple */ [data-brand="lavender"] { --tc-brand-50:#f7f5fc; --tc-brand-100:#ece8f7; --tc-brand-200:#d9d2ed; --tc-brand-300:#CBBFE9; --tc-brand-400:#AFA3D6; --tc-brand-500:#9B8DC6; --tc-brand-600:#7E6EAE; --tc-brand-700:#62528f; --tc-brand-800:#4b3f70; --tc-brand-grad: linear-gradient(145deg,#9B8DC6,#AFA3D6); --tc-brand-grad-strong: linear-gradient(135deg,#7E6EAE 0%,#9B8DC6 48%,#CBBFE9 100%); --tc-brand-glow: 0 4px 16px rgba(155,141,198,.4); --tc-brand-glow-sm: 0 3px 12px rgba(155,141,198,.38); --tc-brand-tint: rgba(155,141,198,.12); --tc-brand-tint-2: rgba(155,141,198,.08); --tc-brand-tint-strong: rgba(155,141,198,.18); --tc-brand-on-tint: #614E9A; } [data-brand="lavender"][data-theme="dark"] { --tc-brand-on-tint: #CBBFE9; } /* 5 · ROSE — warm pink */ [data-brand="rose"] { --tc-brand-50:#fdf2f4; --tc-brand-100:#fbe2e7; --tc-brand-200:#f4c6ce; --tc-brand-300:#EFADB5; --tc-brand-400:#E48592; --tc-brand-500:#D96B7A; --tc-brand-600:#C15567; --tc-brand-700:#a8485a; --tc-brand-800:#863744; --tc-brand-grad: linear-gradient(145deg,#D96B7A,#E48592); --tc-brand-grad-strong: linear-gradient(135deg,#C15567 0%,#D96B7A 48%,#EFADB5 100%); --tc-brand-glow: 0 4px 16px rgba(217,107,122,.4); --tc-brand-glow-sm: 0 3px 12px rgba(217,107,122,.38); --tc-brand-tint: rgba(217,107,122,.12); --tc-brand-tint-2: rgba(217,107,122,.08); --tc-brand-tint-strong: rgba(217,107,122,.18); --tc-brand-on-tint: #A83048; } [data-brand="rose"][data-theme="dark"] { --tc-brand-on-tint: #EFADB5; } /* 6 · AMBER — premium gold */ [data-brand="amber"] { --tc-brand-50:#fdf8ed; --tc-brand-100:#f9eece; --tc-brand-200:#f1dca0; --tc-brand-300:#EDD08A; --tc-brand-400:#E0B458; --tc-brand-500:#D4A040; --tc-brand-600:#B88530; --tc-brand-700:#9c7424; --tc-brand-800:#785818; --tc-brand-grad: linear-gradient(145deg,#D4A040,#E0B458); --tc-brand-grad-strong: linear-gradient(135deg,#B88530 0%,#D4A040 48%,#EDD08A 100%); --tc-brand-glow: 0 4px 16px rgba(212,160,64,.4); --tc-brand-glow-sm: 0 3px 12px rgba(212,160,64,.38); --tc-brand-tint: rgba(212,160,64,.12); --tc-brand-tint-2: rgba(212,160,64,.08); --tc-brand-tint-strong: rgba(212,160,64,.18); --tc-brand-on-tint: #8C6010; } [data-brand="amber"][data-theme="dark"] { --tc-brand-on-tint: #EDD08A; } /* 7 · SAPPHIRE — deep corporate */ [data-brand="sapphire"] { --tc-brand-50:#eff4fb; --tc-brand-100:#dbe7f5; --tc-brand-200:#bcd0ec; --tc-brand-300:#96BAE2; --tc-brand-400:#6496CF; --tc-brand-500:#4A7EC0; --tc-brand-600:#3868A8; --tc-brand-700:#355a8e; --tc-brand-800:#28466e; --tc-brand-grad: linear-gradient(145deg,#4A7EC0,#6496CF); --tc-brand-grad-strong: linear-gradient(135deg,#3868A8 0%,#4A7EC0 48%,#96BAE2 100%); --tc-brand-glow: 0 4px 16px rgba(74,126,192,.4); --tc-brand-glow-sm: 0 3px 12px rgba(74,126,192,.38); --tc-brand-tint: rgba(74,126,192,.12); --tc-brand-tint-2: rgba(74,126,192,.08); --tc-brand-tint-strong: rgba(74,126,192,.18); --tc-brand-on-tint: #1F5090; } [data-brand="sapphire"][data-theme="dark"] { --tc-brand-on-tint: #96BAE2; } /* 8 · MINT — cool teal */ [data-brand="mint"] { --tc-brand-50:#eef8f6; --tc-brand-100:#d6efea; --tc-brand-200:#b0e0d7; --tc-brand-300:#93D4CA; --tc-brand-400:#5FBDAF; --tc-brand-500:#48A89A; --tc-brand-600:#388E82; --tc-brand-700:#347a70; --tc-brand-800:#285e56; --tc-brand-grad: linear-gradient(145deg,#48A89A,#5FBDAF); --tc-brand-grad-strong: linear-gradient(135deg,#388E82 0%,#48A89A 48%,#93D4CA 100%); --tc-brand-glow: 0 4px 16px rgba(72,168,154,.4); --tc-brand-glow-sm: 0 3px 12px rgba(72,168,154,.38); --tc-brand-tint: rgba(72,168,154,.12); --tc-brand-tint-2: rgba(72,168,154,.08); --tc-brand-tint-strong: rgba(72,168,154,.18); --tc-brand-on-tint: #1A706A; } [data-brand="mint"][data-theme="dark"] { --tc-brand-on-tint: #93D4CA; } /* 9 · GRAPHITE — minimal mono */ [data-brand="graphite"] { --tc-brand-50:#f5f6f7; --tc-brand-100:#e8eaed; --tc-brand-200:#ccd1d8; --tc-brand-300:#ABB7C4; --tc-brand-400:#8896A6; --tc-brand-500:#6E7B8C; --tc-brand-600:#596470; --tc-brand-700:#4a525d; --tc-brand-800:#353b43; --tc-brand-grad: linear-gradient(145deg,#6E7B8C,#8896A6); --tc-brand-grad-strong: linear-gradient(135deg,#596470 0%,#6E7B8C 48%,#ABB7C4 100%); --tc-brand-glow: 0 4px 16px rgba(110,123,140,.35); --tc-brand-glow-sm: 0 3px 12px rgba(110,123,140,.35); --tc-brand-tint: rgba(110,123,140,.12); --tc-brand-tint-2: rgba(110,123,140,.08); --tc-brand-tint-strong: rgba(110,123,140,.2); --tc-brand-on-tint: #3A4A5A; } [data-brand="graphite"][data-theme="dark"] { --tc-brand-on-tint: #ABB7C4; } /* 10 · MOCHA — warm pro brown */ [data-brand="mocha"] { --tc-brand-50:#faf6f2; --tc-brand-100:#f0e6dc; --tc-brand-200:#ddc9b4; --tc-brand-300:#C09E80; --tc-brand-400:#A07E5E; --tc-brand-500:#8B6B4A; --tc-brand-600:#735638; --tc-brand-700:#5f4830; --tc-brand-800:#463524; --tc-brand-grad: linear-gradient(145deg,#8B6B4A,#A07E5E); --tc-brand-grad-strong: linear-gradient(135deg,#735638 0%,#8B6B4A 48%,#C09E80 100%); --tc-brand-glow: 0 4px 16px rgba(139,107,74,.4); --tc-brand-glow-sm: 0 3px 12px rgba(139,107,74,.38); --tc-brand-tint: rgba(139,107,74,.12); --tc-brand-tint-2: rgba(139,107,74,.08); --tc-brand-tint-strong: rgba(139,107,74,.18); --tc-brand-on-tint: #5A3E24; } [data-brand="mocha"][data-theme="dark"] { --tc-brand-on-tint: #C09E80; }