/* ============================================================
   variables.css — DevNotz design tokens (Django-inspired palette)
   Colour source: github.com/django/djangoproject.com/scss/_utils.scss
   ============================================================ */
:root {
  /* ── Django Green Palette ────────────────────────────────── */
  --color-green-dark:        #0C4B33;   /* navbar / footer bg    */
  --color-green-dark-hover:  #0a3d29;   /* nav hover state       */
  --color-green-md-dark:     #2B8C67;   /* secondary interactive */
  --color-green-md:          #44B78B;   /* borders / accents     */
  --color-green:             #20AA76;   /* primary CTA           */
  --color-green-light:       #93D7B7;   /* light border / tag bg */
  --color-green-vlight:      #C9F0DD;   /* section background    */
  --color-green-vvlight:     #F1FFF7;   /* page surface (tinted white) */
  --color-gray-line:         #CFE3DC;   /* dividers / hr         */

  /* ── Semantic Aliases ────────────────────────────────────── */
  --color-bg:              #ffffff;
  --color-surface:         #F1FFF7;        /* very light green tint */
  --color-surface-alt:     #f8f8f8;
  --color-card:            #ffffff;
  --color-card-hover:      #F1FFF7;
  --color-border:          #CFE3DC;
  --color-border-dark:     #93D7B7;

  --color-primary:         #0C4B33;
  --color-primary-dark:    #0a3d29;
  --color-primary-light:   #44B78B;
  --color-primary-glow:    rgba(32, 170, 118, 0.18);

  --color-accent:          #20AA76;
  --color-accent-dark:     #2B8C67;
  --color-accent-light:    #93D7B7;

  /* ── Text ────────────────────────────────────────────────── */
  --color-text:            #0C3C26;    /* Django $text            */
  --color-text-muted:      #3d6b55;    /* slightly lighter        */
  --color-text-dim:        #798780;    /* Django $text-light      */
  --color-text-xdim:       #859D94;    /* Django $gray-medium     */
  --color-text-inverse:    #ffffff;

  /* ── Status ──────────────────────────────────────────────── */
  --color-error:           #BA2121;
  --color-error-bg:        #FFBABA;
  --color-warning:         #E9BD46;
  --color-warning-bg:      #FFFDF1;
  --color-success:         #20AA76;
  --color-success-bg:      #C9F0DD;
  --color-info:            #2B8C67;

  /* ── Tag colour set ──────────────────────────────────────── */
  --tag-1: #0C4B33; --tag-1-bg: rgba(12, 75, 51, 0.1);
  --tag-2: #20AA76; --tag-2-bg: rgba(32, 170, 118, 0.12);
  --tag-3: #E9BD46; --tag-3-bg: rgba(233, 189, 70, 0.15);
  --tag-4: #BA2121; --tag-4-bg: rgba(186, 33, 33, 0.1);
  --tag-5: #2B8C67; --tag-5-bg: rgba(43, 140, 103, 0.12);
  --tag-6: #859D94; --tag-6-bg: rgba(133, 157, 148, 0.15);

  /* ── Typography ──────────────────────────────────────────── */
  /* Roboto: Django's primary typeface                          */
  --font-sans:  'Roboto', 'Helvetica Neue', Arial, sans-serif;
  /* Fira Mono: Django's monospace typeface                     */
  --font-mono:  'Fira Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px — Django body size */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  --font-light:    300;
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:   1.1;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Borders — Django uses tight 4-5px radius ────────────── */
  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   5px;
  --radius-xl:   8px;
  --radius-2xl:  12px;
  --radius-full: 100px;

  /* ── Shadows — subtle, green-tinted ─────────────────────── */
  --shadow-sm:   0 1px 3px rgba(12, 60, 38, 0.07);
  --shadow-md:   0 4px 8px  rgba(12, 60, 38, 0.09);
  --shadow-lg:   0 8px 24px rgba(12, 60, 38, 0.12);
  --shadow-xl:   0 16px 48px rgba(12, 60, 38, 0.14);
  --shadow-glow: 0 0 0 3px rgba(32, 170, 118, 0.25);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* ── Layout ──────────────────────────────────────────────── */
  --sidebar-width:  230px;
  --navbar-height:  60px;
  --content-max-w:  1160px;
  --editor-max-w:   860px;
}