/* ============================================================
   tokens.css — Design Tokens (CSS Custom Properties)
   Based on: dtaft/DESIGN.md "The Tactile Curator" system
   ============================================================ */

:root {
  /* === Surface Hierarchy === */
  --surface:                    #f6f6fb;
  --surface-container-low:      #f0f0f6;
  --surface-container-lowest:   #ffffff;
  --surface-container:          #e7e8ee;
  --surface-container-high:     #e1e2e8;
  --surface-container-highest:  #dbdde3;
  --surface-variant:            #dbdde3;
  --surface-dim:                #d2d4db;
  --surface-bright:             #f6f6fb;
  --surface-tint:               #b90034;

  /* === Primary (Pink/Red) === */
  --primary:                    #b90034;
  --primary-dim:                #a2002d;
  --primary-container:          #ff7480;
  --primary-fixed:              #ff7480;
  --primary-fixed-dim:          #ff586b;
  --on-primary:                 #ffefef;
  --on-primary-container:       #4e0010;
  --on-primary-fixed:           #000000;
  --on-primary-fixed-variant:   #600016;
  --inverse-primary:            #ff5167;

  /* === Secondary (Blue) === */
  --secondary:                  #0058bb;
  --secondary-dim:              #004ca4;
  --secondary-container:        #bed2ff;
  --secondary-fixed:            #bed2ff;
  --secondary-fixed-dim:        #a9c4ff;
  --on-secondary:               #f0f2ff;
  --on-secondary-container:     #004495;
  --on-secondary-fixed:         #003270;
  --on-secondary-fixed-variant: #004da6;

  /* === Tertiary (Yellow/Gold) === */
  --tertiary:                   #705900;
  --tertiary-dim:               #624d00;
  --tertiary-container:         #fecb00;
  --tertiary-fixed:             #fecb00;
  --tertiary-fixed-dim:         #eebe00;
  --on-tertiary:                #fff1d5;
  --on-tertiary-container:      #584500;
  --on-tertiary-fixed:          #413200;
  --on-tertiary-fixed-variant:  #634e00;

  /* === Semantic === */
  --on-surface:                 #2d2f33;
  --on-surface-variant:         #5a5b60;
  --on-background:              #2d2f33;
  --background:                 #f6f6fb;
  --outline:                    #75777b;
  --outline-variant:            #acadb1;
  --inverse-surface:            #0c0e12;
  --inverse-on-surface:         #9c9da1;

  /* === Error === */
  --error:                      #b02500;
  --error-dim:                  #b92902;
  --error-container:            #f95630;
  --on-error:                   #ffefec;
  --on-error-container:         #520c00;

  /* === Border Radius === */
  --radius-sm:   0.5rem;
  --radius-md:   1rem;
  --radius-lg:   2rem;
  --radius-xl:   3rem;
  --radius-full: 9999px;

  /* === Shadows (Ambient Gallery Lighting) === */
  --shadow-card:  0 20px 40px rgba(45, 47, 51, 0.06),
                  0 10px 15px rgba(45, 47, 51, 0.04);
  --shadow-hover: 0 25px 50px -12px rgba(185, 0, 52, 0.15);

  /* === Spacing === */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* === Layout === */
  --nav-height: 5rem;
  --max-width:  1600px;

  /* === Glassmorphism === */
  --glass-bg:   rgba(246, 246, 251, 0.70);
  --glass-blur: 24px;
}