/* ============================================================
   DESIGN TOKENS — single source of truth for all visual values
   ============================================================ */

/* ===== Theme: Cream (default) ===== */
:root,
[data-theme="cream"] {
  /* Surface / background */
  --paper:     #F6F4EC;
  --surface:   #FFFFFF;
  --surface-2: #FBFAF4;

  /* Text */
  --ink:   #11211B;
  --ink-2: #243A31;
  --muted: #6E7E74;
  --faint: #9AA89F;

  /* Borders */
  --line:   #E7E3D6;
  --line-2: #D9D4C4;

  /* Brand — green */
  --green:      #0E9F6E;
  --green-d:    #0A7E57;
  --green-soft: #E2F4EC;

  /* Brand — gold */
  --gold:      #C98A1B;
  --gold-2:    #E5A82E;
  --gold-soft: #FBEFD6;

  /* Dark backgrounds */
  --ink-green: #08130E;
  --forest:    #0C2018;

  /* Accent */
  --rose:      #C0496B;
  --rose-soft: #FAE7EC;
  --sky:       #2F77C9;
  --sky-soft:  #E7F0FB;

  /* Platform colors */
  --telegram:      #229ED9;
  --tiktok:        #FE2C55;
  --facebook:      #1877F2;
  --youtube:       #FF0033;
  --snapchat:      #111111;
  --snapchat-text: #FFFC00;

  /* Border radius */
  --r:    18px;
  --r-sm: 12px;

  /* Elevation */
  --shadow:    0 1px 2px rgba(8,19,14,.04), 0 10px 30px rgba(8,19,14,.06);
  --shadow-lg: 0 24px 60px rgba(8,19,14,.16);

  /* Grain texture overlay (SVG data URI) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* ===== Theme: White ===== */
[data-theme="white"] {
  --paper:     #FFFFFF;
  --surface:   #FAFAFA;
  --surface-2: #F5F5F5;
  --line:      #E8E8E8;
  --line-2:    #D8D8D8;
}

/* ===== Theme: Ocean ===== */
[data-theme="ocean"] {
  --paper:     #EBF3F9;
  --surface:   #FFFFFF;
  --surface-2: #F0F7FC;
  --line:      #C8DFF0;
  --line-2:    #B0CEDD;
}

/* ===== Theme: Sage ===== */
[data-theme="sage"] {
  --paper:     #EBF2ED;
  --surface:   #FFFFFF;
  --surface-2: #F0F6F1;
  --line:      #C6DFCB;
  --line-2:    #B0CEB5;
}

/* ===== Theme: Dark ===== */
[data-theme="dark"] {
  --paper:     #151a17;
  --surface:   #1e2520;
  --surface-2: #222d27;
  --ink:       #e8f0ea;
  --ink-2:     #b8c8bc;
  --muted:     #7a9982;
  --faint:     #4e6657;
  --line:      #2a352e;
  --line-2:    #334039;
  --shadow:    0 1px 2px rgba(0,0,0,.2), 0 10px 30px rgba(0,0,0,.3);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.5);
}