/* ============================================================================
   SESTO.SENSO — SOFT EDITORIAL DESIGN SYSTEM
   Ported from portal-v2 original. Light + dark themes via [data-theme] attr.
   ============================================================================ */

:root {
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:     cubic-bezier(1, 0.33, 0.11, 1.34);
  --ease-sweep:      cubic-bezier(0.23, 1, 0.32, 1);

  --d-fast:  150ms;
  --d-base:  250ms;
  --d-slow:  400ms;

  --pink:          #D4175E;
  --pink-hover:    #E6266E;
  --pink-dark:     #B31256;
  --pink-gradient: linear-gradient(180deg, #E6266E 0%, #B31256 100%);
  --pink-glow:     rgba(212, 23, 94, .30);

  --green: #16A34A;
  --amber: #D97706;
  --red:   #DC2626;
  --blue:  #2563EB;

  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, monospace;

  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  --z-nav:    50;
  --z-drawer: 100;
  --z-modal:  200;
  --z-toast:  300;
  --z-auth:   9000;
  --z-load:   10000;
}

html[data-theme="light"] {
  --bg-ambient: radial-gradient(ellipse 80% 60% at 50% 0%, #EEF1F7 0%, #E4E7EE 60%, #DCDFE7 100%);
  --bg-shell:   linear-gradient(180deg, #FFFFFF 0%, #FDFCFA 60%, #F7F5F1 100%);
  --bg-shell-solid: #FFFFFF;
  --bg-card:    linear-gradient(180deg, #FAF9F6 0%, #F4F2EE 100%);
  --bg-card-solid: #FAF9F6;
  --bg-input:   linear-gradient(180deg, #F4F6FA 0%, #ECEFF4 100%);
  --bg-sunken:  linear-gradient(180deg, #ECEFF4 0%, #E4E7EE 100%);
  --bg-secondary: linear-gradient(180deg, #FFFFFF 0%, #F7F5F1 100%);
  --bg-inverse: linear-gradient(180deg, #2A2A2A 0%, #0A0A0A 100%);

  --text-primary:   #0E0E0E;
  --text-secondary: rgba(40, 50, 70, .65);
  --text-tertiary:  rgba(40, 50, 70, .45);
  --text-inverse:   #F5F2ED;

  --border-subtle: rgba(40, 50, 70, .05);
  --border:        rgba(40, 50, 70, .08);

  --shadow-inner-top:    inset 0 1.5px 0 rgba(255, 255, 255, 1);
  --shadow-inner-bottom: inset 0 -1px 0 rgba(40, 50, 70, .04);
  --shadow-cushion:      0 2px 4px rgba(40, 50, 70, .03), 0 4px 12px rgba(40, 50, 70, .04);
  --shadow-lift:         0 4px 12px rgba(40, 50, 70, .06), 0 12px 32px rgba(40, 50, 70, .08);
  --shadow-ambient:      0 16px 40px rgba(40, 50, 70, .08), 0 48px 120px rgba(40, 50, 70, .10);
  --shadow-sunken:       inset 0 1px 2px rgba(40, 50, 70, .08);
  --shadow-pink:         0 4px 12px rgba(212, 23, 94, .35);
}

html[data-theme="dark"] {
  --bg-ambient: radial-gradient(ellipse 80% 60% at 50% 0%, #16161C 0%, #0F0F14 60%, #08080C 100%);
  --bg-shell:   linear-gradient(180deg, #1D1D25 0%, #1A1A22 60%, #15151B 100%);
  --bg-shell-solid: #1A1A22;
  --bg-card:    linear-gradient(180deg, #22222C 0%, #1B1B23 100%);
  --bg-card-solid: #1B1B23;
  --bg-input:   linear-gradient(180deg, #20202A 0%, #1A1A22 100%);
  --bg-sunken:  linear-gradient(180deg, #15151B 0%, #0F0F14 100%);
  --bg-secondary: linear-gradient(180deg, #15151B 0%, #0F0F14 100%);
  --bg-inverse: linear-gradient(180deg, #FFFFFF 0%, #E8E5DE 100%);

  --text-primary:   #F5F2ED;
  --text-secondary: rgba(245, 242, 237, .6);
  --text-tertiary:  rgba(245, 242, 237, .4);
  --text-inverse:   #0E0E0E;

  --border-subtle: rgba(255, 255, 255, .04);
  --border:        rgba(255, 255, 255, .06);

  --shadow-inner-top:    inset 0 1.5px 0 rgba(255, 255, 255, .05);
  --shadow-inner-bottom: inset 0 -1px 0 rgba(0, 0, 0, .2);
  --shadow-cushion:      0 2px 4px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .2);
  --shadow-lift:         0 4px 12px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .3);
  --shadow-ambient:      0 16px 40px rgba(0, 0, 0, .5), 0 48px 120px rgba(0, 0, 0, .4);
  --shadow-sunken:       inset 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-pink:         0 4px 12px rgba(212, 23, 94, .4);
}