/* ============================================================================
   CICOP 2026 — Design tokens
   Mix Cinta Digital (warm identity/avatar accent) + Covertia Core (dark intel
   palette + HUD geometry). Dark mode is the brand default.
   ========================================================================== */

:root {
  /* Covertia neutrals */
  --cpt-void:       #000000;
  --cpt-abyss:      #05080D;
  --cpt-graphite:   #0C131C;
  --cpt-slate:      #14202D;
  --cpt-steel:      #22384F;
  --cpt-ash:        #7A8FA6;
  --cpt-mist:       #B7C7D8;
  --cpt-signal:     #EAF2F9;
  --cpt-paper:      #EEF3FB;
  --cpt-white:      #FFFFFF;

  /* Covertia accent arc */
  --cpt-turquoise:  #5DE0E6;
  --cpt-azur:       #38B6FF;
  --cpt-bleu:       #004AAD;
  --cpt-turquoise-deep: #0B6273;

  /* Cinta Digital warm identity accent */
  --cpt-cinta:      #D65DB1;
  --cpt-cinta-glow: #FF6B9D;
  --cpt-cinta-deep: #8B2F6B;

  /* Mixed gradient — signature */
  --cpt-gradient: linear-gradient(135deg, #5DE0E6 0%, #38B6FF 40%, #D65DB1 100%);
  --cpt-gradient-soft: linear-gradient(135deg, rgba(93,224,230,0.18) 0%, rgba(56,182,255,0.12) 50%, rgba(214,93,177,0.14) 100%);

  /* Semantic status */
  --cpt-alert:    #FF5A5F;
  --cpt-watch:    #FFB020;
  --cpt-verified: #3DE6A0;

  /* Typography */
  --cpt-font-display: 'Figtree', 'Noto Sans Thai', 'Helvetica Neue', Arial, sans-serif;
  --cpt-font-body:    'Mulish', 'Noto Sans Thai', 'Segoe UI', Helvetica, Arial, sans-serif;
  --cpt-font-mono:    'IBM Plex Mono', 'IBM Plex Sans Thai', ui-monospace, Menlo, Consolas, monospace;

  --cpt-size-display: clamp(38px, 7vw, 78px);
  --cpt-size-h1:      clamp(30px, 4.2vw, 48px);
  --cpt-size-h2:      clamp(24px, 3vw, 36px);
  --cpt-size-h3:      20px;
  --cpt-size-body:    16px;
  --cpt-size-small:   14px;
  --cpt-size-label:   12px;

  --cpt-weight-display: 900;
  --cpt-weight-h2:      800;
  --cpt-weight-h3:      700;
  --cpt-weight-body:    400;
  --cpt-weight-label:   600;

  --cpt-lh-tight: 1.08;
  --cpt-lh-snug:  1.35;
  --cpt-lh-body:  1.65;

  --cpt-track-display: -0.035em;
  --cpt-track-h2:      -0.02em;
  --cpt-track-label:   0.18em;
  --cpt-track-mono:    0.14em;

  --cpt-measure: 64ch;

  /* Spacing */
  --cpt-space-1:  4px;
  --cpt-space-2:  8px;
  --cpt-space-3:  12px;
  --cpt-space-4:  16px;
  --cpt-space-5:  24px;
  --cpt-space-6:  32px;
  --cpt-space-7:  48px;
  --cpt-space-8:  64px;
  --cpt-space-9:  96px;

  /* Layout */
  --cpt-max: 1200px;
  --cpt-pad: clamp(20px, 5vw, 64px);
  --cpt-header-h: 72px;

  /* Shapes */
  --cpt-radius-1: 4px;
  --cpt-radius-2: 8px;
  --cpt-radius-3: 12px;
  --cpt-radius-pill: 999px;

  /* Motion */
  --cpt-duration-fast: 150ms;
  --cpt-duration-base: 220ms;
  --cpt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

:root {
  --cpt-bg:          var(--cpt-abyss);
  --cpt-bg-raised:   var(--cpt-graphite);
  --cpt-bg-overlay:  var(--cpt-slate);
  --cpt-border:      #1B2E42;
  --cpt-border-soft: #122031;

  --cpt-text:        var(--cpt-signal);
  --cpt-text-muted:  var(--cpt-mist);
  --cpt-text-subtle: var(--cpt-ash);

  --cpt-accent:        var(--cpt-turquoise);
  --cpt-accent-2:      var(--cpt-cinta);
  --cpt-accent-on:     var(--cpt-void);
  --cpt-accent-soft:   rgba(93, 224, 230, 0.10);
  --cpt-accent-2-soft: rgba(214, 93, 177, 0.12);

  --cpt-focus-ring: 2px solid var(--cpt-turquoise);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --cpt-bg:          var(--cpt-paper);
    --cpt-bg-raised:   var(--cpt-white);
    --cpt-bg-overlay:  #E2EAF6;
    --cpt-border:      #CBD8E9;
    --cpt-border-soft: #DEE7F4;

    --cpt-text:        var(--cpt-void);
    --cpt-text-muted:  #33455C;
    --cpt-text-subtle: #55697F;

    --cpt-accent:        var(--cpt-bleu);
    --cpt-accent-2:      var(--cpt-cinta-deep);
    --cpt-accent-on:     var(--cpt-white);
    --cpt-accent-soft:   rgba(0, 74, 173, 0.07);
    --cpt-accent-2-soft: rgba(139, 47, 107, 0.08);

    --cpt-focus-ring: 2px solid var(--cpt-bleu);
  }
}

:root[data-theme="light"] {
  --cpt-bg:          var(--cpt-paper);
  --cpt-bg-raised:   var(--cpt-white);
  --cpt-bg-overlay:  #E2EAF6;
  --cpt-border:      #CBD8E9;
  --cpt-border-soft: #DEE7F4;

  --cpt-text:        var(--cpt-void);
  --cpt-text-muted:  #33455C;
  --cpt-text-subtle: #55697F;

  --cpt-accent:        var(--cpt-bleu);
  --cpt-accent-2:      var(--cpt-cinta-deep);
  --cpt-accent-on:     var(--cpt-white);
  --cpt-accent-soft:   rgba(0, 74, 173, 0.07);
  --cpt-accent-2-soft: rgba(139, 47, 107, 0.08);

  --cpt-focus-ring: 2px solid var(--cpt-bleu);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cpt-header-h) + 24px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cpt-bg);
  color: var(--cpt-text);
  font-family: var(--cpt-font-body);
  font-size: var(--cpt-size-body);
  line-height: var(--cpt-lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--cpt-font-display);
  text-transform: uppercase;
  line-height: var(--cpt-lh-tight);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--cpt-size-display); font-weight: var(--cpt-weight-display); letter-spacing: var(--cpt-track-display); }
h2 { font-size: var(--cpt-size-h2);      font-weight: var(--cpt-weight-h2);      letter-spacing: var(--cpt-track-h2); }
h3 { font-size: var(--cpt-size-h3);      font-weight: var(--cpt-weight-h3);      letter-spacing: 0.02em; }

p { margin: 0; max-width: var(--cpt-measure); }
a { color: var(--cpt-accent); }

:focus-visible { outline: var(--cpt-focus-ring); outline-offset: 3px; }

.cpt-label {
  font-family: var(--cpt-font-mono);
  font-size: var(--cpt-size-label);
  font-weight: var(--cpt-weight-label);
  letter-spacing: var(--cpt-track-label);
  text-transform: uppercase;
  color: var(--cpt-accent);
}

html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3,
html[lang="th"] h4,
html[lang="th"] .cpt-label,
html[lang="th"] .cpt-btn,
html[lang="th"] .eyebrow {
  text-transform: none;
  letter-spacing: 0;
  word-break: break-word;
  line-break: loose;
}
html[lang="th"] h1 { line-height: 1.28; }
html[lang="th"] h2 { line-height: 1.35; }
html[lang="th"] body,
html[lang="th"] p,
html[lang="th"] li { line-height: 1.85; }
html[lang="th"] p, html[lang="th"] li { hyphens: none; }