/* Mandara design tokens (concept) v0.1.0
   Built on IBM Carbon architecture, with an editorial dark theme and an orange accent.
   Dark is the default; add class="light" to <body> for the light theme. */

:root {

  /* --- COLOR: PRIMITIVES --- */
  --color-black:        #0A0A0A;
  --color-black-100:    #111111;
  --color-black-200:    #1A1A1A;
  --color-black-300:    #252525;
  --color-black-400:    #333333;
  --color-cream-50:     #FDFAF5;
  --color-cream-100:    #F5F0E8;
  --color-cream-200:    #EDE6D8;
  --color-cream-300:    #D9CFC0;
  --color-white:        #FFFFFF;

  --color-orange-50:    #FFF3ED;
  --color-orange-100:   #FFD9C2;
  --color-orange-200:   #FFB08A;
  --color-orange-300:   #FF7D45;
  --color-orange-400:   #FF5722;
  --color-orange-500:   #E84700;   /* primary */
  --color-orange-600:   #C43B00;
  --color-orange-700:   #9E2F00;

  --color-blue-50:      #EBF5FF;
  --color-blue-200:     #A8CEEE;
  --color-blue-400:     #4A90D9;
  --color-blue-600:     #1D5FA8;

  /* --- COLOR: SEMANTIC TOKENS --- */
  --background:         var(--color-black);
  --background-subtle:  var(--color-black-100);
  --background-ui:      var(--color-black-200);
  --background-hover:   var(--color-black-300);
  --background-active:  var(--color-black-400);

  --surface-01:         var(--color-black-100);
  --surface-02:         var(--color-black-200);
  --surface-03:         var(--color-black-300);
  --surface-overlay:    rgba(10,10,10,0.85);

  --surface-light:      var(--color-cream-50);
  --surface-light-02:   var(--color-cream-100);
  --surface-light-03:   var(--color-cream-200);

  --text-primary:       var(--color-cream-50);
  --text-secondary:     var(--color-cream-300);
  --text-placeholder:   #9A9A9A;      /* 6.2:1 on surface-02 (was #333, 1.4:1) */
  --text-disabled:      #757575;      /* 3.8:1 on surface-02 (was #555, 2.3:1) */
  --text-inverse:       var(--color-black);
  --text-on-color:      var(--color-white);
  --text-on-interactive: var(--color-black);   /* dark text on orange fills: 5.0:1 (white was 3.9:1) */
  --text-muted:         var(--text-secondary);
  --text-brand:         var(--color-orange-400);

  --interactive:        var(--color-orange-500);
  --interactive-hover:  var(--color-orange-400);
  --interactive-active: var(--color-orange-600);
  --focus:              var(--color-orange-400);

  --border-subtle:      rgba(255,255,255,0.08);
  --border-strong:      rgba(255,255,255,0.18);
  --border-brand:       var(--color-orange-500);

  --support-success:    #42BE65;
  --support-warning:    #F1C21B;
  --support-error:      #FA4D56;
  --support-info:       #4589FF;

  /* --- GRADIENT --- */
  --gradient-brand:     linear-gradient(135deg, #FF5722 0%, #FF9A3C 50%, #FFD166 100%);
  --gradient-dark:      linear-gradient(135deg, #1A1A1A 0%, #0A0A0A 100%);
  --gradient-mesh:      radial-gradient(ellipse at 20% 50%, rgba(232,71,0,0.35) 0%, transparent 60%),
                        radial-gradient(ellipse at 80% 20%, rgba(255,161,100,0.2) 0%, transparent 50%),
                        radial-gradient(ellipse at 60% 80%, rgba(74,144,217,0.15) 0%, transparent 50%);
  --gradient-card:      linear-gradient(135deg, rgba(255,87,34,0.12) 0%, rgba(255,154,60,0.06) 100%);

  /* --- TYPOGRAPHY --- */
  --font-serif:         'IBM Plex Serif', Georgia, serif;
  --font-sans:          'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:          'IBM Plex Mono', 'Courier New', monospace;

  /* Type scale (Carbon-aligned) */
  --text-xs:       0.75rem;    /* 12px */
  --text-sm:       0.875rem;   /* 14px */
  --text-base:     1rem;       /* 16px */
  --text-lg:       1.125rem;   /* 18px */
  --text-xl:       1.25rem;    /* 20px */
  --text-2xl:      1.5rem;     /* 24px */
  --text-3xl:      2rem;       /* 32px */
  --text-4xl:      2.625rem;   /* 42px */
  --text-5xl:      3.375rem;   /* 54px */
  --text-6xl:      4.25rem;    /* 68px */
  --text-7xl:      5.75rem;    /* 92px */
  --text-display:  8rem;       /* 128px */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.2em;

  /* Font weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* --- SPACING (8px base) --- */
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   2rem;      /* 32px */
  --space-8:   2.5rem;    /* 40px */
  --space-9:   3rem;      /* 48px */
  --space-10:  4rem;      /* 64px */
  --space-11:  5rem;      /* 80px */
  --space-12:  6rem;      /* 96px */
  --space-13:  8rem;      /* 128px */

  /* --- BORDER RADIUS --- */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-2xl:   20px;
  --radius-full:  9999px;

  /* --- SHADOWS --- */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg:    0 10px 40px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-xl:    0 24px 64px rgba(0,0,0,0.7);
  --shadow-brand: 0 4px 24px rgba(232,71,0,0.35);
  --shadow-glow:  0 0 40px rgba(232,71,0,0.2), 0 0 80px rgba(232,71,0,0.1);

  /* --- MOTION --- */
  --duration-fast:    100ms;
  --duration-base:    200ms;
  --duration-slow:    400ms;
  --duration-slower:  700ms;
  --ease-standard:    cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-entrance:    cubic-bezier(0, 0, 0.38, 0.9);
  --ease-exit:        cubic-bezier(0.2, 0, 1, 0.9);
  --ease-expressive:  cubic-bezier(0.4, 0.14, 0.3, 1);

  /* --- Z-INDEX --- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
}

body.light {
  --background:          #FDFAF5;
  --background-subtle:   #F5F0E8;
  --background-ui:       #EDE6D8;
  --background-hover:    #D9CFC0;
  --background-active:   #C8BDAD;

  --surface-01:          #F5F0E8;
  --surface-02:          #EDE6D8;
  --surface-03:          #D9CFC0;
  --surface-overlay:     rgba(253,250,245,0.92);

  --text-primary:        #0A0A0A;
  --text-secondary:      #444444;
  --text-placeholder:    #5F5F5F;
  --text-disabled:       #808080;
  --text-inverse:        #FDFAF5;
  --text-brand:          var(--color-orange-600);

  --border-subtle:       rgba(0,0,0,0.10);
  --border-strong:       rgba(0,0,0,0.22);

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
  --shadow-lg:   0 10px 40px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.08);
}