/* ============================================
   voice8.cutdee.com v2 — Design Tokens
   Voice Clone Studio · Dark Mode First
   ============================================ */

:root {
  /* Colors — Brand */
  --c-bg:           #0b0d18;
  --c-bg-soft:      #15182a;
  --c-bg-card:      rgba(28, 32, 56, 0.78);
  --c-bg-card-hi:   rgba(38, 42, 70, 0.92);
  --c-border:       rgba(120, 140, 200, 0.22);
  --c-border-hi:    rgba(120, 140, 200, 0.45);

  --c-text:         #e6ebff;
  --c-text-soft:    #c8d0ee;
  --c-muted:        #97a3c9;
  --c-dim:          #6a759a;

  --c-accent:       #01A040;   /* primary brand — blue */
  --c-accent-2:     #35D073;   /* secondary — teal */
  --c-accent-3:     #6daedc;   /* tertiary — purple */
  --c-accent-warm:  #ff9d6c;   /* CTA — orange */

  --c-ok:           #5ddc8c;
  --c-warn:         #f4c46a;
  --c-danger:       #ff7a8a;
  --c-info:         #6ec1ff;

  /* Gradients */
  --g-hero:         linear-gradient(135deg, rgba(1,160,64,0.18), rgba(53,208,115,0.14));
  --g-cta:          linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
  --g-text:         linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
  --g-card:         linear-gradient(180deg, rgba(28,32,56,0.85), rgba(20,23,42,0.75));

  /* Typography */
  --font-sans:      "Inter", "Segoe UI", "Noto Sans Thai", system-ui, sans-serif;
  --font-mono:      "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --font-display:   "Inter", system-ui, sans-serif;

  --fs-xs:          12px;
  --fs-sm:          13px;
  --fs-base:        15px;
  --fs-md:          16px;
  --fs-lg:          18px;
  --fs-xl:          22px;
  --fs-2xl:         28px;
  --fs-3xl:         36px;
  --fs-4xl:         48px;

  --fw-normal:      400;
  --fw-medium:      500;
  --fw-semi:        600;
  --fw-bold:        700;
  --fw-black:       800;

  --lh-tight:       1.25;
  --lh-base:        1.55;
  --lh-loose:       1.75;

  /* Spacing */
  --s-1:            4px;
  --s-2:            8px;
  --s-3:            12px;
  --s-4:            16px;
  --s-5:            20px;
  --s-6:            24px;
  --s-8:            32px;
  --s-10:           40px;
  --s-12:           48px;
  --s-16:           64px;
  --s-20:           80px;

  /* Radius */
  --r-sm:           6px;
  --r-md:           10px;
  --r-lg:           14px;
  --r-xl:           20px;
  --r-pill:         999px;

  /* Shadow */
  --sh-sm:          0 4px 12px rgba(0,0,0,0.25);
  --sh-md:          0 10px 30px rgba(0,0,0,0.35);
  --sh-lg:          0 18px 50px rgba(0,0,0,0.45);
  --sh-glow:        0 0 0 1px rgba(1,160,64,0.4), 0 8px 30px rgba(1,160,64,0.25);
  --sh-glow-teal:   0 0 0 1px rgba(53,208,115,0.4), 0 8px 30px rgba(53,208,115,0.25);

  /* Layout */
  --w-page:         1200px;
  --w-form:         720px;
  --w-narrow:       480px;
  --h-nav:          64px;

  /* Motion */
  --ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast:         120ms;
  --d-base:         200ms;
  --d-slow:         350ms;
}