/* ============================================================
   AARTUX — DESIGN TOKENS (variables.css)
   ============================================================
   SINGLE SOURCE OF TRUTH for all design decisions.
   
   TYPOGRAPHY: Minor Third Scale (1.2 ratio)
   Base: 16px → 19 → 23 → 27 → 33 → 39
   
   THEME: Dark default, [data-theme="light"] override
   ============================================================ */

:root {
  /* ── Brand Colors — Dark Theme (default) ── */
  --c-bg:          #0a0a0a;
  --c-surface:     #111111;
  --c-border:      #1e1e1e;
  --c-text:        #e8e8e8;
  --c-text-dim:    #888888;
  --c-accent:      #c8ff00;
  --c-accent-dim:  #4a5e00;
  --c-white:       #ffffff;

  /* ── Theme-aware RGBA tokens ── */
  --c-nav-bg:            rgba(10, 10, 10, 0.6);
  --c-nav-bg-solid:      rgba(10, 10, 10, 0.95);
  --c-overlay:           rgba(0, 0, 0, 0.85);
  --c-overlay-light:     rgba(0, 0, 0, 0.6);
  --c-card-gradient:     rgba(10, 10, 10, 0.92);
  --c-badge-bg:          rgba(0, 0, 0, 0.6);
  --c-badge-bg-solid:    rgba(0, 0, 0, 0.85);
  --c-accent-ghost:      rgba(200, 255, 0, 0.08);
  --c-accent-ghost-light:rgba(200, 255, 0, 0.05);
  --c-accent-glow:       rgba(200, 255, 0, 0.25);
  --c-accent-glow-strong:rgba(200, 255, 0, 0.45);
  --c-accent-glow-max:   rgba(200, 255, 0, 0.7);
  --c-accent-border:     rgba(200, 255, 0, 0.2);
  --c-accent-ring:       rgba(200, 255, 0, 0.06);
  --c-accent-border-med: rgba(200, 255, 0, 0.3);
  --c-modal-close-border:rgba(255, 255, 255, 0.2);
  --c-modal-close-bg:    rgba(0, 0, 0, 0.5);
  --c-shadow-deep:       rgba(0, 0, 0, 0.5);
  --c-shadow-soft:       rgba(0, 0, 0, 0.4);
  --c-cursor-glow:       rgba(200, 255, 0, 0.06);
  --c-grain-opacity:     0.035;
  --c-orb-secondary:     #00d4ff;
  --c-work-thumb-opacity: 0.18;
  --c-work-thumb-hover:   0.3;

  /* ── Minor Third Type Scale (1.2 ratio) ──
     Base 16px: 12 → 14 → 16 → 19 → 23 → 27 → 33 → 39
  */
  --f-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-h1:      clamp(2rem, 1.5rem + 2.5vw, 2.4375rem);   /* 39px max */
  --f-h2:      clamp(1.75rem, 1.25rem + 2vw, 2.0625rem);  /* 33px max */
  --f-h3:      clamp(1.375rem, 1.1rem + 1vw, 1.6875rem);  /* 27px max */
  --f-h4:      clamp(1.1875rem, 1rem + 0.5vw, 1.4375rem);  /* 23px max */
  --f-h5:      1.1875rem;                                   /* 19px */
  --f-body-lg: 1rem;                                        /* 16px */
  --f-body:    0.875rem;                                    /* 14px */
  --f-caption: 0.75rem;                                     /* 12px */
  --f-small:   0.75rem;                                     /* 12px */
  --f-base:    1rem;                                        /* 16px body base */

  /* ── Line Heights ── */
  --lh-tight:    1.2;
  --lh-heading:  1.3;
  --lh-body:     1.6;
  --lh-relaxed:  1.75;

  /* ── Spacing Scale (4px base) ── */
  --sp-1:  0.25rem;   /* 4px */
  --sp-2:  0.5rem;    /* 8px */
  --sp-3:  1rem;      /* 16px */
  --sp-4:  1.5rem;    /* 24px */
  --sp-5:  2rem;      /* 32px */
  --sp-6:  3rem;      /* 48px */
  --sp-7:  4rem;      /* 64px */
  --sp-8:  6rem;      /* 96px */

  /* ── Section Spacing ── */
  /*--s-section: clamp(5rem, 4rem + 5vw, 8rem);*/
/*Custom*/	
  --s-section: clamp(4rem, 3rem + 4vw, 6rem)
	  /*Custom-End*/	
  --s-gap:     clamp(1.5rem, 1rem + 2vw, 3rem);

  /* ── Container System ── */
  --s-page:    10%;
  --s-page-narrow: 15%;

  /* ── Motion ── */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  0.7s;
}


/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-theme="light"] {
  --c-bg:          #f5f4f0;
  --c-surface:     #ffffff;
  --c-border:      #ddd9d1;
  --c-text:        #1a1a1a;
  --c-text-dim:    #6e6e6e;
  --c-accent:      #4a8500;
  --c-accent-dim:  #a3c865;
  --c-white:       #ffffff;

  --c-nav-bg:            rgba(245, 244, 240, 0.72);
  --c-nav-bg-solid:      rgba(245, 244, 240, 0.97);
  --c-overlay:           rgba(0, 0, 0, 0.55);
  --c-overlay-light:     rgba(0, 0, 0, 0.3);
 /* --c-card-gradient:     rgba(255, 255, 255, 0.94);*/
	--c-card-gradient:     rgba(0, 0, 0, 0.75);
  --c-badge-bg:          rgba(255, 255, 255, 0.75);
  --c-badge-bg-solid:    rgba(255, 255, 255, 0.92);
  --c-accent-ghost:      rgba(74, 133, 0, 0.08);
  --c-accent-ghost-light:rgba(74, 133, 0, 0.05);
  --c-accent-glow:       rgba(74, 133, 0, 0.2);
  --c-accent-glow-strong:rgba(74, 133, 0, 0.35);
  --c-accent-glow-max:   rgba(74, 133, 0, 0.5);
  --c-accent-border:     rgba(74, 133, 0, 0.2);
  --c-accent-ring:       rgba(74, 133, 0, 0.08);
  --c-accent-border-med: rgba(74, 133, 0, 0.3);
  --c-modal-close-border:rgba(0, 0, 0, 0.15);
  --c-modal-close-bg:    rgba(255, 255, 255, 0.8);
  --c-shadow-deep:       rgba(0, 0, 0, 0.12);
  --c-shadow-soft:       rgba(0, 0, 0, 0.08);
  --c-cursor-glow:       rgba(74, 133, 0, 0.06);
  --c-grain-opacity:     0.02;
  --c-orb-secondary:     #00a3cc;
  /*--c-work-thumb-opacity: 0.25;*/
  --c-work-thumb-opacity: 0.55;
/*--c-work-thumb-hover:   0.45;*/
	--c-work-thumb-hover:   0.75;
}