/* ============================================================
   ATLAS ONE — Design Tokens
   All colours, fonts, and sizing defined here once.
   Change a value here and it updates everywhere in the app.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* --- Brand Blues (Primary #215DE4 / Secondary #2121E4) --- */
  --blue:        #215DE4;
  --blue-dark:   #2121E4;
  --blue-hover:  #1A4FCC;
  --blue-light:  #EBF1FD;
  --blue-mid:    #B8CEFA;

  /* --- Neutrals (text base: #171717) --- */
  --navy:        #171717;
  --grey-800:    #2A2A2A;
  --grey-700:    #3D3D3D;
  --grey-600:    #565656;
  --grey-500:    #717171;
  --grey-400:    #9B9B9B;
  --grey-300:    #C4C4C4;
  --grey-200:    #D8D8D8;
  --grey-100:    #F1F5F9;
  --grey-50:     #F8FAFC;
  --white:       #FFFFFF;

  /* --- Status Colours --- */
  --green:        #3C752F;
  --green-light:  #E6F0E4;
  --green-mid:    #C5DAC0;
  --amber:        #A16B41;
  --amber-light:  #F5ECE3;
  --amber-mid:    #E4D0BB;
  --red:          #E83535;
  --red-light:    #FDECEC;
  --red-mid:      #F9C4C4;
  --purple:       #7C3AED;
  --purple-light: #EDE9FE;

  /* --- Platform Colours (campaign planner) --- */
  --facebook:   #1877F2;
  --tiktok:     #010101;
  --instagram:  #C13584;
  --snapchat:   #FFFC00;
  --google:     #4285F4;
  --youtube:    #FF0000;

  /* --- Layout --- */
  --sidebar-width: 220px;
  --header-height: 62px;
  --content-padding: 32px;

  /* --- Border Radius --- */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  --shadow:    0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  /* Premium "soft" card elevation (matches the Reports look) */
  --shadow-soft:       0 1px 3px rgba(16,24,40,0.06), 0 6px 20px rgba(16,24,40,0.04);
  --shadow-soft-hover: 0 2px 6px rgba(16,24,40,0.08), 0 12px 28px rgba(16,24,40,0.07);

  /* --- Transitions --- */
  --transition-fast: 120ms ease;
  --transition:      200ms ease;
}