/* ==========================================================
   DESIGN SYSTEM — TOKENS
   ARCcC: assets/styles/design-system/tokens.css
   Ponto único de verdade para todas as variáveis visuais.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* ── Theme transition (applied to all elements on toggle) ── */
*, *::before, *::after {
  transition:
    background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color     0.35s cubic-bezier(0.16, 1, 0.3, 1),
    color            0.2s  cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow       0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── DARK MODE (default) ─────────────────────────────────── */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* ─── Color Palette ────────────────────────────────────── */
  --color-bg:            #080808;
  --color-bg-secondary:  #101010;
  --color-bg-tertiary:   #1a1a1a;
  --color-surface:       rgba(255, 255, 255, 0.03);
  --color-surface-hover: rgba(255, 255, 255, 0.06);
  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.15);

  --color-text-primary:   #f0f0f0;
  --color-text-secondary: #888888;
  --color-text-tertiary:  #555555;
  --color-white:          #ffffff;

  /* ─── Brand Pink — Hideaki Bell ───────────────────────── */
  --color-accent:        #FF3EA5;
  --color-accent-dim:    rgba(255, 62, 165, 0.12);
  --color-accent-glow:   rgba(255, 62, 165, 0.30);
  --color-accent-soft:   rgba(255, 62, 165, 0.08);

  /* ─── Typography ─────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2.5rem;     /* 40px */
  --text-4xl:  3.5rem;     /* 56px */
  --text-5xl:  5rem;       /* 80px */
  --text-6xl:  7rem;       /* 112px */

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed:1.8;

  --tracking-tight:  -0.04em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;
  --tracking-widest:  0.25em;

  /* ─── Spacing ─────────────────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ─── Layout ─────────────────────────────────────────────── */
  --max-width:     1200px;
  --max-width-sm:  640px;
  --max-width-md:  800px;
  --nav-height:    72px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     16px;
  --radius-full:   9999px;

  /* ─── Shadows & Effects ──────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:  0 12px 48px rgba(0,0,0,0.6);
  --shadow-xl:  0 24px 80px rgba(0,0,0,0.7);
  --glow-accent:0 0 40px var(--color-accent-glow);

  /* ─── Transitions ─────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --duration-slower: 900ms;

  /* ─── Z-Index ─────────────────────────────────────────────── */
  --z-base:    1;
  --z-overlay: 100;
  --z-modal:   200;
  --z-panel:   300;
  --z-top:     400;
}

/* ── LIGHT MODE ──────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  /* ─── Color Palette ────────────────────────────────────── */
  --color-bg:            #f7f7f8;
  --color-bg-secondary:  #ffffff;
  --color-bg-tertiary:   #efefef;
  --color-surface:       rgba(0, 0, 0, 0.04);
  --color-surface-hover: rgba(0, 0, 0, 0.07);
  --color-border:        rgba(0, 0, 0, 0.10);
  --color-border-strong: rgba(0, 0, 0, 0.18);

  --color-text-primary:   #141414;
  --color-text-secondary: #5a5a5a;
  --color-text-tertiary:  #999999;
  --color-white:          #ffffff;

  /* ─── Brand Pink stays the same in both modes ─────────── */
  --color-accent:        #FF3EA5;
  --color-accent-dim:    rgba(255, 62, 165, 0.10);
  --color-accent-glow:   rgba(255, 62, 165, 0.22);
  --color-accent-soft:   rgba(255, 62, 165, 0.06);

  /* ─── Lighter shadows for light mode ──────────────────── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.10);
  --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 12px 48px rgba(0, 0, 0, 0.15);
  --shadow-xl:  0 24px 80px rgba(0, 0, 0, 0.18);
}

/* ── Light mode: hero canvas fades to light bg ───────────── */
[data-theme="light"] #hero {
  background: linear-gradient(135deg, #fff0f6 0%, #f7f7f8 60%);
}

[data-theme="light"] #hero::after {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, #f7f7f8 100%),
    linear-gradient(to bottom, transparent 60%, #f7f7f8 100%);
}

[data-theme="light"] #about {
  background: var(--color-bg-secondary);
}

/* ── Light mode: shimmer adjusts ─────────────────────────── */
[data-theme="light"] .shimmer {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary) 25%,
    var(--color-bg-tertiary)  50%,
    var(--color-bg-secondary) 75%
  );
  background-size: 200% 100%;
}

/* ── Light mode: settings panel ──────────────────────────── */
[data-theme="light"] .settings-panel {
  background: #ffffff;
}

[data-theme="light"] .artwork-settings-item {
  background: var(--color-bg);
}

[data-theme="light"] .settings-input,
[data-theme="light"] .settings-textarea,
[data-theme="light"] .settings-select {
  background: var(--color-bg);
  color: var(--color-text-primary);
}