/* =============================================================
   Godhuli Theme — CSS Custom Properties (Design Tokens)
   File: css/godhuli-tokens.css
   Load order: first stylesheet (before main.css)
   ============================================================= */

:root {

  /* ── Colors ───────────────────────────────────────────────── */
  --color-primary:        #79be49;   /* brand green */
  --color-primary-hover:  #68a83c;   /* darker green for hover states */
  --color-primary-alpha:  rgba(121, 190, 73, 0.50); /* border tint on widgets */

  --color-dark:           #343a40;   /* submit button background */
  --color-body-text:      #333;
  --color-muted:          #777;
  --color-muted-dark:     #666;
  --color-text-alt:       #303133;   /* tag/tagcloud text */
  --color-heading:        #000;
  --color-form-text:      #495057;   /* CF7 inputs */
  --color-error:          #ea553d;   /* close-search hover */

  --color-white:          #fff;
  --color-white-60:       rgba(255, 255, 255, 0.60);
  --color-white-35:       rgba(255, 255, 255, 0.35);
  --color-white-30:       rgba(255, 255, 255, 0.30);

  --color-bg:             #ffffff;
  --color-bg-light:       #f5f5f5;  /* tag backgrounds */
  --color-bg-footer:      #eee;     /* footer, search-wrap */
  --color-bg-dark:        #4a4a4a;  /* social icons default */
  --color-bg-overlay:     #333333;  /* slide-title overlay */
  --color-bg-search-btn:  rgba(38, 50, 56, 0.80);

  --color-border:         #eee;
  --color-border-alt:     #aaa;     /* select borders */
  --color-border-muted:   rgba(238, 238, 238, 0.70);
  --color-border-input:   #d2d2d2;
  --color-border-arrow:   #777777;
  --color-border-table:   #ccc;
  --color-border-calendar:#e2e4e7;
  --color-border-quote:   #dcd7ca;

  --color-block-blue-dark:   #0073aa;
  --color-block-blue-light:  #229fd8;
  --color-block-gray-dark:   #444;
  --color-calendar-bg:       #edeff0;
  --color-calendar-caption:  #dcd7ca;
  --color-calendar-text:     #40464d;
  --color-quote-mark:        #cdced0;
  --color-table-border-striped: transparent;

  /* ── Typography ───────────────────────────────────────────── */
  --font-body:       'Lora', serif;
  --font-heading:    'Lora', serif;
  --font-nav:        'Lora', serif;  /* nav-collapse uses Lora */

  --text-xs:    0.75rem;  /* 12px */
  --text-sm:    0.8125rem;/* 13px */
  --text-base:  0.875rem; /* 14px  — widget/form base */
  --text-md:    0.9375rem;/* 15px  — widget recent/CF7 label */
  --text-body:  1rem;     /* 16px */
  --text-lg:    1.125rem; /* 18px  — logo description */
  --text-xl:    1.8rem;   /* h2 base */
  --text-2xl:   2.5rem;   /* post title */
  --text-4xl:   2.8125rem;/* 45px logo */

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

  --leading-tight:   1.2;
  --leading-heading: 1.4;
  --leading-body:    1.5;
  --leading-loose:   1.8;
  --leading-copy:    24px; /* line-height used across blog content */

  --letter-spacing-sm: 0.05em;
  --letter-spacing-md: 1px;
  --letter-spacing-lg: 2px;

  /* ── Spacing scale ────────────────────────────────────────── */
  --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:  1.75rem;  /* 28px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px  — section padding */

  /* ── Layout ───────────────────────────────────────────────── */
  --container-max:   1140px;
  --content-narrow:  610px;  /* wp-block-group inner */
  --content-wide:    1100px; /* alignwide */

  --bp-sm:  767px;
  --bp-md:  991px;
  --bp-lg:  992px;

  /* ── Effects ──────────────────────────────────────────────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   5px;
  --radius-full: 50%;

  --shadow-navbar:  0 1px 1px rgba(0, 0, 0, 0.10);
  --shadow-search:  0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-select:  0 1px 0 1px rgba(0, 0, 0, 0.04);

  --transition-fast:   all 0.15s ease-in-out;
  --transition-base:   all 0.3s ease-out;
  --transition-slow:   all 0.5s ease;
  --transition-slider: all 1s ease 1s;

  --z-nav:    1030;
  --z-search: 9997;
  --z-block:  999;
}