/* ============================================
   sekkAI Brand Tokens
   設計 × 世界 — sekkai.app
   ============================================ */

:root {
  /* ---- Brand colors ---- */
  --brand-ink:         #0F0D1C;  /* dark surface, icon bg */
  --brand-indigo:      #7055E8;  /* primary, CTA, links */
  --brand-indigo-dim:  #4A3BB0;  /* hover, pressed state */
  --brand-lavender:    #AE98FF;  /* AI accent, 設計 node */
  --brand-teal:        #5AC8D8;  /* output, success, 世界 node */
  --brand-mist:        #F0EDF9;  /* light surface, bg */
  --brand-white:       #FFFFFF;

  /* ---- Indigo scale ---- */
  --brand-indigo-50:   #EEEDFE;
  --brand-indigo-100:  #CECBF6;
  --brand-indigo-200:  #AFA9EC;
  --brand-indigo-400:  #7055E8;  /* = brand-indigo */
  --brand-indigo-600:  #534AB7;
  --brand-indigo-800:  #3C3489;
  --brand-indigo-900:  #26215C;

  /* ---- Lavender scale ---- */
  --brand-lavender-50:  #F5F3FF;
  --brand-lavender-100: #EDE9FD;
  --brand-lavender-200: #D5CEFB;
  --brand-lavender-400: #AE98FF;  /* = brand-lavender */
  --brand-lavender-600: #8A72E8;

  /* ---- Teal scale ---- */
  --brand-teal-50:  #E1F9FC;
  --brand-teal-100: #A8ECEF;
  --brand-teal-400: #5AC8D8;  /* = brand-teal */
  --brand-teal-600: #2A9EB0;

  /* ---- Semantic aliases ---- */
  --color-primary:          var(--brand-indigo);
  --color-primary-hover:    var(--brand-indigo-dim);
  --color-accent:           var(--brand-lavender);
  --color-success:          var(--brand-teal);
  --color-surface-dark:     var(--brand-ink);
  --color-surface-light:    var(--brand-mist);

  /* ---- Typography ---- */
  --font-display:  'Instrument Serif', Georgia, serif;   /* H1 hero, H2 ekrany */
  --font-ui:       'Nunito', system-ui, sans-serif;       /* cały UI */
  --font-mono:     'DM Mono', 'Fira Code', monospace;    /* ID, kod */

  /* ---- Font weights ---- */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* ---- Spacing (8pt grid) ---- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;

  /* ---- Radius ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 4px rgba(15,13,28,0.12);
  --shadow-md:  0 4px 16px rgba(15,13,28,0.16);
  --shadow-lg:  0 8px 32px rgba(15,13,28,0.20);
  --shadow-indigo: 0 4px 24px rgba(112,85,232,0.30);

  /* ---- Transitions ---- */
  --transition-fast:    150ms ease;
  --transition-base:    200ms ease;
  --transition-slow:    300ms ease;

  /* ---- Z-index scale ---- */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ---- Dark mode overrides ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface-light: #1A1730;
  }
}

/* ============================================
   Utility classes
   ============================================ */

.text-brand-indigo  { color: var(--brand-indigo); }
.text-brand-lavender{ color: var(--brand-lavender); }
.text-brand-teal    { color: var(--brand-teal); }
.bg-brand-ink       { background-color: var(--brand-ink); }
.bg-brand-mist      { background-color: var(--brand-mist); }

/* Primary button */
.btn-brand {
  background: var(--brand-indigo);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 44px;
}
.btn-brand:hover {
  background: var(--brand-indigo-dim);
  box-shadow: var(--shadow-indigo);
}

/* Brand link */
.link-brand {
  color: var(--brand-indigo);
  text-decoration: none;
}
.link-brand:hover {
  color: var(--brand-lavender);
}