/* Loma Sub design system — tokens (verbatim from _ds/loma-sub-design-system/tokens/*.css).
   Do not edit; app styles live in app.css. */

/* ── tokens/fonts.css ─────────────────────────────────────── */
/* Loma Sub uses three Google-hosted families. The product loads them through
   next/font; consumers of this design system load them from the Google Fonts CDN.
   Noto Sans Thai — body/UI · IBM Plex Sans Thai — display · JetBrains Mono — numerals */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ── tokens/colors.css ────────────────────────────────────── */
:root{
/* ── Ocean — primary brand ─────────────────────────────── */
--ocean-100:#D4F4F8;--ocean-300:#7DDCE8;--ocean-400:#2EC4D4;--ocean-500:#0D9BA8;--ocean-600:#0A7E8C;--ocean-700:#086570;
/* ── Coral — highlight / error-of-others ───────────────── */
--coral-100:#FDF0EF;--coral-200:#FADBD8;--coral-400:#F0897F;--coral-500:#E8655A;--coral-600:#d4544a;
/* ── Ink — text + dark surfaces ────────────────────────── */
--ink-100:#E8EAED;--ink-300:#B0B6BF;--ink-400:#8D949E;--ink-500:#6B7280;--ink-600:#545A61;--ink-700:#3D4248;--ink-900:#1A1D21;
/* ── Surfaces ──────────────────────────────────────────── */
--surface-white:#FFFFFF;--surface-ghost:#FAFBFC;
/* ── Semantic status ───────────────────────────────────── */
--success:#2D9F6F;--success-bg:#E7F6EF;
--warn:#A96B1B;--warn-bg:#FDF2E2;--warn-border:#EFD8B3;
--amber:#F2C94C;

/* ── Semantic aliases (prefer these in product code) ───── */
--text-primary:var(--ink-900);
--text-body:var(--ink-700);
--text-muted:var(--ink-500);
--text-faint:var(--ink-400);
--text-on-dark:#FFFFFF;
--text-on-dark-muted:var(--ink-300);
--text-accent:var(--ocean-600);
--text-accent-strong:var(--ocean-700);
--text-inverse-accent:var(--ocean-300);

--surface-page:var(--surface-ghost);
--surface-card:var(--surface-white);
--surface-card-subtle:rgba(255,255,255,0.6);
--surface-dark:var(--ink-900);
--surface-accent-soft:var(--ocean-100);
--surface-coral-soft:var(--coral-100);

--action-primary:var(--ocean-500);
--action-primary-hover:var(--ocean-600);
--action-dark:var(--ink-900);
--action-dark-hover:var(--ink-700);
--action-coral:var(--coral-500);
--action-coral-hover:var(--coral-400);

--border-hairline:rgba(26,29,33,0.08);
--border-card:rgba(0,0,0,0.05);
--border-card-faint:rgba(0,0,0,0.04);
--border-on-dark:rgba(255,255,255,0.10);
--border-input:rgba(0,0,0,0.08);
--ring-focus:var(--ocean-400);
--ring-accent:rgba(125,220,232,0.40);

--selection-bg:rgba(13,155,168,0.18);

/* Glass surfaces */
--glass-bg:rgba(255,255,255,0.72);
--glass-strong-bg:rgba(255,255,255,0.90);
--glass-blur:14px;
--glass-strong-blur:16px;
}

/* ── tokens/typography.css ────────────────────────────────── */
:root{
--font-sans:"Noto Sans Thai",ui-sans-serif,system-ui,sans-serif;
--font-display:"IBM Plex Sans Thai","Noto Sans Thai",sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,monospace;

/* Weights actually shipped */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */

/* Display scale — headings use --font-display + 600, tracking -0.01em */
--text-h1:54px;--text-h1-sm:40px;
--text-h2:40px;--text-h2-sm:30px;
--text-h3:32px;--text-h3-sm:26px;
--text-h4:22px;
--text-h5:20px;
--text-card-title:17px;

/* Body scale */
--text-lead:17px;
--text-body:16px;
--text-ui:15px;
--text-sm:14px;
--text-xs:13px;
--text-2xs:12px;
--text-3xs:11px;

--lh-display:1.12; /* @kind font */
--lh-tight:1.2; /* @kind font */
--lh-snug:1.375; /* @kind font */
--lh-relaxed:1.625; /* @kind font */

--tracking-display:-0.01em; /* @kind font */
--tracking-eyebrow:0.02em; /* @kind font */
}

/* ── tokens/spacing.css ───────────────────────────────────── */
:root{
/* 4px base step; the product's real rhythm is 5/8/12/20/28px paddings */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
--space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px;--space-12:48px;
--space-14:56px;--space-16:64px;--space-20:80px;--space-24:96px;

/* Layout */
--container-max:1280px;      /* max-w-7xl — home + kit shells */
--container-article:896px;   /* max-w-4xl — benchmark long-form */
--container-prose:672px;     /* max-w-2xl — section headings */
--gutter:20px;               /* px-5 mobile */
--gutter-lg:32px;            /* sm:px-8 */
--section-y:96px;            /* py-24 */
--section-y-sm:48px;         /* py-12 for tighter bands */
--card-pad:28px;             /* p-7 feature cards */
--card-pad-lg:32px;          /* p-8 pricing cards */
}

/* ── tokens/radius.css ────────────────────────────────────── */
:root{
--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;
--radius-xl:24px;--radius-2xl:28px;--radius-3xl:36px;
--radius-pill:999px;
/* Literal one-off radii used by real surfaces */
--radius-card:20px;      /* feature cards */
--radius-panel:24px;     /* pricing card */
--radius-band:32px;      /* dark Pro band, CTA band */
--radius-device:26px;    /* SubtitleStudio outer shell */
--radius-screen:18px;    /* SubtitleStudio inner screen */
}

/* ── tokens/elevation.css ─────────────────────────────────── */
:root{
--elev-1:0 1px 3px rgba(26,29,33,0.06),0 1px 2px rgba(26,29,33,0.04);
--elev-2:0 2px 8px rgba(26,29,33,0.07),0 1px 4px rgba(26,29,33,0.04);
--elev-3:0 6px 18px rgba(26,29,33,0.09),0 2px 6px rgba(26,29,33,0.05);
--elev-4:0 14px 40px rgba(10,126,140,0.12),0 6px 16px rgba(26,29,33,0.06);
--elev-glow:0 0 0 1px rgba(13,155,168,0.18),0 10px 30px rgba(13,155,168,0.18);
/* Button lift shadows (tinted by the button's own colour) */
--shadow-btn-ocean:0 8px 24px -6px rgba(13,155,168,0.55);
--shadow-btn-ocean-hover:0 12px 30px -6px rgba(13,155,168,0.60);
--shadow-btn-coral:0 8px 24px -6px rgba(232,101,90,0.50);
}

/* ── tokens/motion.css ────────────────────────────────────── */
:root{
--ease-ocean:cubic-bezier(0.25,0.1,0.25,1); /* @kind other */
--ease-surface:cubic-bezier(0,0,0.2,1); /* @kind other */
--ease-dive:cubic-bezier(0.4,0,1,1); /* @kind other */
--dur-fast:200ms; /* @kind other */
--dur-base:300ms; /* @kind other */
--dur-slow:800ms; /* @kind other */
--lift-hover:-2px;   /* hover:-translate-y-0.5 */
--lift-card:-4px;    /* hover:-translate-y-1 */
--press-scale:0.97; /* @kind other */  /* active:scale-[0.97] */
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatSoft{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(-1.5deg)}}
@keyframes pulseRing{0%{transform:scale(0.92);opacity:.55}100%{transform:scale(1.45);opacity:0}}
@keyframes fadeUp{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes gradientPan{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes shimmer{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes equalize{0%,100%{transform:scaleY(0.35)}50%{transform:scaleY(1)}}
.loma-float{animation:float 6s ease-in-out infinite}
.loma-float-soft{animation:floatSoft 7s ease-in-out infinite}
.loma-fade-in{animation:fadeIn .4s cubic-bezier(0.25,0.1,0.25,1) both}
.loma-fade-up{animation:fadeUp .7s cubic-bezier(0,0,0.2,1) both}
.loma-equalize{animation:equalize 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.loma-float,.loma-float-soft,.loma-fade-in,.loma-fade-up,.loma-equalize{animation:none}}

/* ── tokens/gradients.css ─────────────────────────────────── */
/* The four "living gradient" background states of the Loma surface language. */
.loma-gradient-idle{background:radial-gradient(120% 120% at 12% 8%,rgba(125,220,232,.35) 0%,rgba(125,220,232,0) 45%),radial-gradient(120% 120% at 92% 18%,rgba(240,137,127,.22) 0%,rgba(240,137,127,0) 42%),linear-gradient(135deg,#f0f7fa 0%,#e8f4f0 30%,#f5eef6 60%,#fae8e5 100%)}
.loma-gradient-hero{background:radial-gradient(90% 90% at 15% 0%,rgba(46,196,212,.28) 0%,rgba(46,196,212,0) 50%),radial-gradient(80% 80% at 95% 10%,rgba(232,101,90,.16) 0%,rgba(232,101,90,0) 45%),radial-gradient(100% 100% at 50% 100%,rgba(125,220,232,.25) 0%,rgba(125,220,232,0) 55%),linear-gradient(135deg,#eef7fa 0%,#e8f4f1 28%,#f4edf6 62%,#fae8e4 100%);background-size:160% 160%,160% 160%,160% 160%,200% 200%;animation:gradientPan 22s ease-in-out infinite}
.loma-gradient-listening{background:linear-gradient(135deg,#e6f7f4 0%,#d4f4f8 35%,#ede6f5 65%,#f8e4e0 100%)}
.loma-gradient-processing{background:linear-gradient(135deg,#eaf0f7 0%,#f0e8f5 50%,#f5eaea 100%)}
.text-gradient-ocean{background:linear-gradient(120deg,var(--ocean-600) 0%,var(--ocean-400) 55%,#44d2e0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@media (prefers-reduced-motion:reduce){.loma-gradient-hero{animation:none}}

/* ── tokens/base.css ──────────────────────────────────────── */
body{margin:0;background:var(--surface-page);color:var(--ink-900);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--selection-bg);color:var(--ink-900)}
/* Thai line-breaking + comfortable leading for vowel/tone marks */
.thai{word-break:break-word;line-break:loose}
a{color:var(--ocean-600);text-decoration:none}
a:hover{color:var(--ocean-700)}
.glass{background:var(--glass-bg);backdrop-filter:saturate(140%) blur(var(--glass-blur));-webkit-backdrop-filter:saturate(140%) blur(var(--glass-blur))}
.glass-strong{background:var(--glass-strong-bg);backdrop-filter:saturate(150%) blur(var(--glass-strong-blur));-webkit-backdrop-filter:saturate(150%) blur(var(--glass-strong-blur))}
.hairline{border-color:var(--border-hairline)}