/* =============================================================================
   GRIMOIREWORKS — DESIGN TOKENS
   "The Living Tome" — warm parchment, dark leather, gilt gold, cosmic midnight
   =============================================================================

   Usage: Import this file first in any stylesheet or HTML.
   All tokens are CSS custom properties on :root (light) or [data-theme="dark"].
   ============================================================================= */


/* =============================================================================
   LIGHT THEME (Default)
   ============================================================================= */
:root {

  /* ---------------------------------------------------------------------------
     COLOR — PARCHMENT (backgrounds, surfaces)
     --------------------------------------------------------------------------- */
  --color-parchment-50:  #FAF3E3;
  --color-parchment-100: #F5E6C8;  /* main background */
  --color-parchment-200: #EDD5A3;
  --color-parchment-300: #D4B483;

  /* ---------------------------------------------------------------------------
     COLOR — LEATHER (nav, dark sections, borders)
     --------------------------------------------------------------------------- */
  --color-leather-600: #7A4420;
  --color-leather-700: #5C3317;   /* nav / dark section background */
  --color-leather-800: #3D2008;
  --color-leather-900: #1E0F04;

  /* ---------------------------------------------------------------------------
     COLOR — INK (text)
     --------------------------------------------------------------------------- */
  --color-ink:       #1A0F0A;     /* body text */
  --color-ink-light: #4A2E1A;     /* secondary text */

  /* ---------------------------------------------------------------------------
     COLOR — GOLD (primary accent, headings, CTA)
     --------------------------------------------------------------------------- */
  --color-gold-300: #D4A843;
  --color-gold-400: #C9A030;      /* primary accent / headings */
  --color-gold-500: #A07820;

  /* ---------------------------------------------------------------------------
     COLOR — COSMIC (jewel accent, links, secondary actions)
     --------------------------------------------------------------------------- */
  --color-cosmic-300: #8B9FE8;
  --color-cosmic-500: #3D5AA8;    /* jewel accent */
  --color-cosmic-700: #1A2E6B;
  --color-cosmic-900: #0A0F2A;    /* deep cosmic dark */

  /* ---------------------------------------------------------------------------
     COLOR — SURFACES & OVERLAYS
     --------------------------------------------------------------------------- */
  --color-surface-card:    #F0E0BC;
  --color-surface-overlay: rgba(30, 15, 4, 0.6);

  /* Semantic aliases for light theme */
  --color-bg:             var(--color-parchment-100);
  --color-bg-raised:      var(--color-parchment-50);
  --color-bg-sunken:      var(--color-parchment-200);
  --color-bg-dark:        var(--color-leather-700);
  --color-bg-darkest:     var(--color-leather-900);
  --color-text-primary:   var(--color-ink);
  --color-text-secondary: var(--color-ink-light);
  --color-text-on-dark:   var(--color-parchment-100);
  --color-text-muted:     var(--color-parchment-300);
  --color-accent:         var(--color-gold-400);
  --color-accent-dim:     var(--color-gold-500);
  --color-jewel:          var(--color-cosmic-500);
  --color-jewel-bright:   var(--color-cosmic-300);
  --color-border:         var(--color-parchment-300);
  --color-border-dark:    var(--color-leather-600);

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY — FONT FAMILIES
     --------------------------------------------------------------------------- */
  --font-display: 'Cinzel Decorative', 'Cinzel', serif;
  --font-heading:  'Cinzel', serif;
  --font-body:     'EB Garamond', Georgia, serif;
  --font-accent:   'Pinyon Script', cursive;  /* pull quotes / special callouts */
  --font-ui:       'Cinzel', serif;

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY — TYPE SCALE (base 16px)
     --------------------------------------------------------------------------- */
  --text-xs:   0.75rem;   /*  12px */
  --text-sm:   0.875rem;  /*  14px */
  --text-base: 1.125rem;  /*  18px — book body is slightly larger */
  --text-lg:   1.25rem;   /*  20px */
  --text-xl:   1.5rem;    /*  24px */
  --text-2xl:  1.875rem;  /*  30px */
  --text-3xl:  2.25rem;   /*  36px */
  --text-4xl:  3rem;      /*  48px */
  --text-5xl:  3.75rem;   /*  60px */
  --text-6xl:  4.5rem;    /*  72px */

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY — LINE HEIGHTS
     --------------------------------------------------------------------------- */
  --leading-tight:  1.2;
  --leading-normal: 1.6;   /* generous for readability, book-like */
  --leading-loose:  1.8;

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

  /* ---------------------------------------------------------------------------
     BORDER RADIUS — restrained; books don't have soft corners
     --------------------------------------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* ---------------------------------------------------------------------------
     SHADOWS
     --------------------------------------------------------------------------- */
  --shadow-parchment: 0 2px 8px rgba(26, 15, 10, 0.15),  0 1px 3px rgba(26, 15, 10, 0.10);
  --shadow-card:      0 4px 16px rgba(26, 15, 10, 0.20), 0 2px 6px rgba(26, 15, 10, 0.12);
  --shadow-lifted:    0 8px 32px rgba(26, 15, 10, 0.25), 0 4px 12px rgba(26, 15, 10, 0.15);

  /* ---------------------------------------------------------------------------
     TRANSITIONS
     --------------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ---------------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------------- */
  --container-max: 1280px;
  --container-padding: var(--space-6);   /* mobile default */
  --nav-height: 68px;
  --leather-spine-width: 12px;           /* left-edge spine accent */
}


/* =============================================================================
   DARK THEME
   Swap: parchment → cosmic depths  |  leather → cosmic mid  |  gold stays
   Activate with: <html data-theme="dark"> or <body data-theme="dark">
   ============================================================================= */
[data-theme="dark"] {

  /* Parchment → deep cosmic */
  --color-parchment-50:  #141829;
  --color-parchment-100: #0E1120;  /* main background becomes cosmic-900 family */
  --color-parchment-200: #1A2040;
  --color-parchment-300: #2A3460;

  /* Leather → cosmic mid tones */
  --color-leather-600: #2A3870;
  --color-leather-700: #1A2E6B;   /* cosmic-700 */
  --color-leather-800: #111E50;
  --color-leather-900: #070C1E;

  /* Ink → light parchment */
  --color-ink:       #EDD5A3;
  --color-ink-light: #C4A878;

  /* Gold stays — brightens slightly on dark */
  --color-gold-300: #E0B84E;
  --color-gold-400: #D4A843;
  --color-gold-500: #C9A030;

  /* Cosmic accent brightens on dark */
  --color-cosmic-300: #A8BAFF;
  --color-cosmic-500: #6B87E0;
  --color-cosmic-700: #3D5AA8;
  --color-cosmic-900: #0A0F2A;

  /* Surfaces */
  --color-surface-card:    #1A2040;
  --color-surface-overlay: rgba(10, 15, 42, 0.75);

  /* Semantic overrides */
  --color-bg:             #0E1120;
  --color-bg-raised:      #141829;
  --color-bg-sunken:      #090C18;
  --color-bg-dark:        #1A2E6B;
  --color-bg-darkest:     #070C1E;
  --color-text-primary:   #EDD5A3;
  --color-text-secondary: #C4A878;
  --color-text-on-dark:   #EDD5A3;
  --color-text-muted:     #5A6A9A;
  --color-accent:         #D4A843;
  --color-accent-dim:     #C9A030;
  --color-jewel:          #6B87E0;
  --color-jewel-bright:   #A8BAFF;
  --color-border:         #2A3460;
  --color-border-dark:    #3D5AA8;

  /* Shadows adapt to dark bg */
  --shadow-parchment: 0 2px 8px rgba(0, 0, 0, 0.4),  0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-card:      0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lifted:    0 8px 32px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
}