/* Starchan — CSS custom properties (light theme defaults) */
:root {
  /* Motion tokens — full shorthand values (duration + easing) */
  --transition-fast:  150ms ease;           /* hover micro-interactions */
  --transition-base:  300ms ease-out;       /* component entrance/state transitions */
  --transition-slow:  500ms ease-out;       /* section reveal / IntersectionObserver */

  /* Easing curves — use with custom duration for nuanced transitions */
  --ease-standard:    cubic-bezier(0.33, 1, 0.68, 1);    /* smooth decel — most UI */
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot — toggles, badges */
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);    /* slow in+out — modals, overlays */

  /* Artemis brand palette */
  --gold:           #c8923a;
  --gold-light:     #d4a84e;
  --gold-dark:      #b07d2d;
  --gold-alpha:     rgba(200,146,58,0.14);
  --navy:           #1a2535;
  --navy-deep:      #111420;
  --navy-border:    #253b52;
  --beige:          #ede8df;
  --beige-card:     #faf7f2;
  --beige-border:   #d8d0c4;

  /* Account / identity surfaces — warm parchment page + dark slate cards.
     Shared by account, profile, auth (login/register/…), members so the
     logged-in experience reads as one palette. Tune here, applies everywhere. */
  --acct-page-bg:
    radial-gradient(900px 520px at 50% 0%, #f6f0e1 0%, rgba(246,240,225,0) 70%),
    linear-gradient(180deg, #ece4d2 0%, #e2d6bd 100%);
  --acct-card-bg:       linear-gradient(180deg, #313f50 0%, #2a3644 100%);
  --acct-card-border:   rgba(32, 42, 58, 0.22);
  --acct-hero-ink:      #1d2737;
  --acct-hero-ink-soft: rgba(32, 42, 58, 0.6);
  --text-on-dark:   #dde8f4;
  --text-muted-dark:#6585a0;

  /* Semantic aliases (used by chan.css + board pages) */
  --bg:             #ede8df;
  --bg-post:        #faf7f2;
  --text:           #1a2535;
  --link:           #c8923a;
  --visited:        #a07030;
  --hover:          #d4a84e;
  --border:         #d8d0c4;
  --header-bg:      #1a2535;
  --accent:         #c8923a;
  --text-dim:       #6b7280;
  --greentext:      #5a7a3a;

  /* Typography */
  --font-main:      'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:   'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:      'Courier New', Courier, monospace;
  --font-size-xs:   12px;   /* badges, timestamps, metadata */
  --font-size-sm:   14px;   /* secondary UI, post metadata */
  --font-size-base: 16px;   /* body text */
  --font-size-md:   18px;   /* sub-headlines, section intros */
  --font-size-lg:   20px;   /* card headings, board titles */
  --font-size-xl:   24px;   /* section headings */
  --font-size-2xl:  28px;   /* page headings */
  --font-size-3xl:  40px;   /* hero sub-headings */
  --font-size-4xl:  56px;   /* hero main headings */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --line-height:    1.65;

  /* Spacing scale */
  --gap-xs:  4px;
  --gap-sm:  10px;
  --gap-md:  20px;
  --gap-lg:  32px;
  --gap-xl:  72px;

  /* Layout heights */
  --header-height: 80px;
  --tabs-height:   48px;

  /* Site chrome — translucent + blurred so atmospheric pages read through */
  --header-bg: rgba(26, 37, 53, 0.82);
  --tabs-bg:   rgba(13, 22, 35, 0.82);
  --header-blur: blur(12px);

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  13px;

  /* Highlight / accent tints */
  --bg-highlight:    #fffbe6;
  --post-highlight:  #fffacd;

  /* Surface variants */
  --surface-reply:    #f8f4ee;
  --surface-sticky:   #fdf6e3;
  --beige-dark:       #d9d2c4;  /* darker beige — shadow-facing surfaces, section dividers */
  --bg-alt:           #f2ede7;  /* table headers, zebra rows, subtle alternate surface */

  /* Semantic colors */
  --color-success:    #6b9577;
  --color-warning:    #a85c3a;
  --color-error:      #b91c1c;
  --text-muted:       var(--text-dim);  /* alias — prefer --text-dim in new code */

  /* Semantic backgrounds */
  --bg-success:       rgba(107,149,119,0.12);
  --bg-warning:       rgba(168,92,58,0.12);
  --bg-error:         rgba(204,0,0,0.10);

  /* Shadow scale */
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:        0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg:        0 8px 32px rgba(0,0,0,0.16);
  --shadow-glow:      0 0 20px rgba(200,146,58,0.35), 0 4px 16px rgba(0,0,0,0.15);

  /* Semantic shadow aliases */
  --shadow-card:      var(--shadow-sm);   /* standard card surface */
  --shadow-raised:    var(--shadow-md);   /* elevated / hover state */
  --shadow-modal:     var(--shadow-lg);   /* modal / overlay surfaces */

  /* Z-index scale */
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-notification:   300;
  --z-modal:          400;
  --z-tooltip:        600;
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  :root {
    --text:     #000000;
    --text-dim: #333333;
    --gold:     #b06800;
    --border:   #666666;
  }
}

@media (forced-colors: active) {
  *:focus {
    outline: 3px solid ButtonText !important;
    outline-offset: 2px !important;
  }
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:  0s;
    --transition-base:  0s;
    --transition-slow:  0s;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}