/* ============================================================================
   DERWENT LONDON - Design Tokens
   ============================================================================
   Single source of truth for all visual properties.
   Framework-agnostic CSS custom properties.

   Usage: include this file in any project, then reference tokens as
   var(--dl-*) throughout your stylesheets.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. COLOUR - Brand Palette
   ---------------------------------------------------------------------------- */

:root {

  /* 1.1 Brand primaries */
  --dl-charcoal:        #303439;
  --dl-forest:          #3f4a34;
  --dl-sage:            #95b7aa;
  --dl-stone:           #bdb7a1;
  --dl-amber:           #ee964b;
  --dl-black:           #000000;
  --dl-white:           #ffffff;

  /* 1.2 Accent */
  --dl-lime:            #d1d82c;
  --dl-sand:            #bdb7a1;

  /* 1.3 Extended neutrals (derived from brand) */
  --dl-cream:           #f1f0ec;
  --dl-warm-grey:       #c5c8c8;
  --dl-mid-grey:        #707077;
  --dl-dark-grey:       #1a1a1a;

  /* 1.4 Charcoal tint scale (10% increments) */
  --dl-charcoal-10:     #eaeaeb;
  --dl-charcoal-20:     #d5d6d7;
  --dl-charcoal-30:     #bfc1c3;
  --dl-charcoal-40:     #aaacaf;
  --dl-charcoal-50:     #95979b;
  --dl-charcoal-60:     #7f8287;
  --dl-charcoal-70:     #6a6d73;
  --dl-charcoal-80:     #55585f;
  --dl-charcoal-90:     #3f434b;
  --dl-charcoal-100:    #303439;

  /* 1.5 Forest tint scale */
  --dl-forest-10:       #e9ebe7;
  --dl-forest-20:       #d3d7cf;
  --dl-forest-30:       #bdc3b7;
  --dl-forest-40:       #a7af9f;
  --dl-forest-50:       #919b87;
  --dl-forest-60:       #7b876f;
  --dl-forest-70:       #657357;
  --dl-forest-80:       #4f5f3f;
  --dl-forest-90:       #475543;
  --dl-forest-100:      #3f4a34;

  /* 1.6 Sage tint scale */
  --dl-sage-10:         #f3f7f5;
  --dl-sage-20:         #e7efec;
  --dl-sage-30:         #dbe7e2;
  --dl-sage-40:         #cfdfd8;
  --dl-sage-50:         #c3d7ce;
  --dl-sage-60:         #b7cfc4;
  --dl-sage-70:         #abc7ba;
  --dl-sage-80:         #9fbfb0;
  --dl-sage-90:         #95b7aa;
  --dl-sage-100:        #95b7aa;

  /* 1.7 Stone tint scale */
  --dl-stone-10:        #f7f6f4;
  --dl-stone-20:        #efede9;
  --dl-stone-30:        #e7e5de;
  --dl-stone-40:        #dfdcd3;
  --dl-stone-50:        #d7d3c8;
  --dl-stone-60:        #cfcabd;
  --dl-stone-70:        #c7c1b2;
  --dl-stone-80:        #bfb8a7;
  --dl-stone-90:        #bdb7a1;
  --dl-stone-100:       #bdb7a1;

  /* 1.8 Amber tint scale */
  --dl-amber-10:        #fdf5ee;
  --dl-amber-20:        #fbeadd;
  --dl-amber-30:        #f9e0cc;
  --dl-amber-40:        #f7d5bb;
  --dl-amber-50:        #f5cbaa;
  --dl-amber-60:        #f3c099;
  --dl-amber-70:        #f1b688;
  --dl-amber-80:        #efab77;
  --dl-amber-90:        #eda166;
  --dl-amber-100:       #ee964b;

  /* 1.9 Lime tint scale */
  --dl-lime-10:         #fbfbe9;
  --dl-lime-20:         #f6f7d3;
  --dl-lime-30:         #f2f3bd;
  --dl-lime-40:         #edefa7;
  --dl-lime-50:         #e9eb91;
  --dl-lime-60:         #e4e77b;
  --dl-lime-70:         #e0e365;
  --dl-lime-80:         #dbdf4f;
  --dl-lime-90:         #d6db3a;
  --dl-lime-100:        #d1d82c;


  /* 1.10 Semantic colour aliases - Light mode */
  --dl-surface-primary:         var(--dl-white);
  --dl-surface-secondary:       var(--dl-cream);
  --dl-surface-tertiary:        var(--dl-stone-10);
  --dl-surface-inverse:         var(--dl-charcoal);
  --dl-surface-brand:           var(--dl-forest);
  --dl-surface-elevated:        var(--dl-white);
  --dl-surface-overlay:         rgba(0, 0, 0, 0.5);

  --dl-text-primary:            var(--dl-black);
  --dl-text-secondary:          var(--dl-mid-grey);          /* #707077 - 4.9:1 on white ✓ AA */
  --dl-text-tertiary:           #636368;                     /* 5.5:1 on white ✓ AA. Was #8e8e93 (3.3:1 ✗ for normal text) */
  --dl-text-inverse:            var(--dl-white);
  --dl-text-disabled:           #8e8e93;                     /* inactive UI component - WCAG 1.4.3 exempt */

  --dl-border-default:          var(--dl-charcoal-20);
  --dl-border-strong:           var(--dl-black);
  --dl-border-subtle:           var(--dl-charcoal-10);
  --dl-border-focus:            var(--dl-forest);

  --dl-interactive-default:     var(--dl-sage);
  --dl-interactive-hover:       #a8c5b9;
  --dl-interactive-active:      #8fb0a3;
  --dl-interactive-disabled:    var(--dl-warm-grey);

  --dl-accent-primary:          var(--dl-lime);
  --dl-accent-secondary:        var(--dl-amber);
  --dl-accent-subtle:           var(--dl-sage);

  --dl-status-success:          var(--dl-forest);
  --dl-status-warning:          var(--dl-amber);
  --dl-status-error:            #c44536;
  --dl-status-info:             var(--dl-sage);

  --dl-status-success-bg:       var(--dl-forest-10);
  --dl-status-warning-bg:       var(--dl-amber-10);
  --dl-status-error-bg:         #fdf0ee;
  --dl-status-info-bg:          var(--dl-sage-10);
}

/* 1.11 Dark mode overrides */
[data-theme="dark"],
.dl-dark {
  --dl-surface-primary:         var(--dl-dark-grey);
  --dl-surface-secondary:       var(--dl-charcoal);
  --dl-surface-tertiary:        #252525;
  --dl-surface-inverse:         var(--dl-cream);
  --dl-surface-brand:           var(--dl-forest);
  --dl-surface-elevated:        #2a2a2a;
  --dl-surface-overlay:         rgba(0, 0, 0, 0.7);

  --dl-text-primary:            var(--dl-white);
  --dl-text-secondary:          var(--dl-warm-grey);          /* #c5c8c8 - 8.0:1 on #1a1a1a ✓ AA */
  --dl-text-tertiary:           #8e8e93;                      /* 4.0:1 on #1a1a1a ✓ AA-lg. Was #707077 (2.7:1 ✗) */
  --dl-text-inverse:            var(--dl-black);
  --dl-text-disabled:           #8e8e93;

  --dl-border-default:          #3a3a3a;
  --dl-border-strong:           var(--dl-white);
  --dl-border-subtle:           #2a2a2a;
  --dl-border-focus:            var(--dl-sage);

  --dl-interactive-default:     var(--dl-sage);
  --dl-interactive-hover:       #a8c5b9;
  --dl-interactive-active:      #8fb0a3;
  --dl-interactive-disabled:    var(--dl-mid-grey);

  --dl-accent-primary:          var(--dl-lime);
  --dl-accent-secondary:        var(--dl-amber);
  --dl-accent-subtle:           var(--dl-sage);

  --dl-status-success:          var(--dl-sage);
  --dl-status-warning:          var(--dl-amber);
  --dl-status-error:            #e05a4b;
  --dl-status-info:             var(--dl-sage);

  --dl-status-success-bg:       rgba(63, 74, 52, 0.3);
  --dl-status-warning-bg:       rgba(238, 150, 75, 0.15);
  --dl-status-error-bg:         rgba(196, 69, 54, 0.15);
  --dl-status-info-bg:          rgba(149, 183, 170, 0.15);
}

/* Auto dark mode (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dl-surface-primary:         var(--dl-dark-grey);
    --dl-surface-secondary:       var(--dl-charcoal);
    --dl-surface-tertiary:        #252525;
    --dl-surface-inverse:         var(--dl-cream);
    --dl-surface-brand:           var(--dl-forest);
    --dl-surface-elevated:        #2a2a2a;
    --dl-surface-overlay:         rgba(0, 0, 0, 0.7);

    --dl-text-primary:            var(--dl-white);
    --dl-text-secondary:          var(--dl-warm-grey);
    --dl-text-tertiary:           #8e8e93;
    --dl-text-inverse:            var(--dl-black);
    --dl-text-disabled:           #8e8e93;

    --dl-border-default:          #3a3a3a;
    --dl-border-strong:           var(--dl-white);
    --dl-border-subtle:           #2a2a2a;
    --dl-border-focus:            var(--dl-sage);

    --dl-interactive-default:     var(--dl-sage);
    --dl-interactive-hover:       #a8c5b9;
    --dl-interactive-active:      #8fb0a3;
    --dl-interactive-disabled:    var(--dl-mid-grey);

    --dl-accent-primary:          var(--dl-lime);
    --dl-accent-secondary:        var(--dl-amber);
    --dl-accent-subtle:           var(--dl-sage);
  }
}


/* ----------------------------------------------------------------------------
   2. TYPOGRAPHY
   ---------------------------------------------------------------------------- */

:root {

  /* 2.1 Font families */
  --dl-font-primary:      'The Future', 'Century Gothic', 'Futura', sans-serif;
  --dl-font-mono:         'SF Mono', 'Fira Code', 'Fira Mono', monospace;

  /* 2.2 Font weights */
  --dl-weight-thin:       100;
  --dl-weight-extralight: 200;
  --dl-weight-light:      300;
  --dl-weight-regular:    400;
  --dl-weight-medium:     500;
  --dl-weight-bold:       700;
  --dl-weight-black:      900;

  /* 2.3 Type scale - modular scale (1.25 ratio, base 16px)
     Inspired by Apple HIG: clear hierarchy, generous sizing for display,
     restrained for body. */
  --dl-text-xs:           0.75rem;    /* 12px - captions, legal */
  --dl-text-sm:           0.875rem;   /* 14px - secondary text, metadata */
  --dl-text-base:         1rem;       /* 16px - body text */
  --dl-text-md:           1.125rem;   /* 18px - large body / intro */
  --dl-text-lg:           1.25rem;    /* 20px - section labels */
  --dl-text-xl:           1.5rem;     /* 24px - heading 4 */
  --dl-text-2xl:          1.875rem;   /* 30px - heading 3 */
  --dl-text-3xl:          2.25rem;    /* 36px - heading 2 */
  --dl-text-4xl:          3rem;       /* 48px - heading 1 */
  --dl-text-5xl:          3.75rem;    /* 60px - display small */
  --dl-text-6xl:          4.5rem;     /* 72px - display large */
  --dl-text-7xl:          6rem;       /* 96px - display hero */

  /* 2.4 Line heights */
  --dl-leading-none:      1;
  --dl-leading-tight:     1.15;
  --dl-leading-snug:      1.3;
  --dl-leading-normal:    1.5;
  --dl-leading-relaxed:   1.65;
  --dl-leading-loose:     1.8;

  /* 2.5 Letter spacing */
  --dl-tracking-tight:    -0.02em;
  --dl-tracking-normal:   0;
  --dl-tracking-wide:     0.02em;
  --dl-tracking-wider:    0.04em;
  --dl-tracking-widest:   0.08em;

  /* 2.6 Paragraph spacing */
  --dl-paragraph-spacing: 1em;

  /* 2.7 Max line widths (measure) */
  --dl-measure-narrow:    45ch;
  --dl-measure-base:      65ch;
  --dl-measure-wide:      80ch;
}


/* ----------------------------------------------------------------------------
   3. SPACING - 4px base grid
   ---------------------------------------------------------------------------- */

:root {
  --dl-space-0:           0;
  --dl-space-px:          1px;
  --dl-space-0-5:         0.125rem;   /* 2px */
  --dl-space-1:           0.25rem;    /* 4px */
  --dl-space-1-5:         0.375rem;   /* 6px */
  --dl-space-2:           0.5rem;     /* 8px */
  --dl-space-2-5:         0.625rem;   /* 10px */
  --dl-space-3:           0.75rem;    /* 12px */
  --dl-space-4:           1rem;       /* 16px */
  --dl-space-5:           1.25rem;    /* 20px */
  --dl-space-6:           1.5rem;     /* 24px */
  --dl-space-7:           1.75rem;    /* 28px */
  --dl-space-8:           2rem;       /* 32px */
  --dl-space-10:          2.5rem;     /* 40px */
  --dl-space-12:          3rem;       /* 48px */
  --dl-space-14:          3.5rem;     /* 56px */
  --dl-space-16:          4rem;       /* 64px */
  --dl-space-20:          5rem;       /* 80px */
  --dl-space-24:          6rem;       /* 96px */
  --dl-space-28:          7rem;       /* 112px */
  --dl-space-32:          8rem;       /* 128px */
  --dl-space-40:          10rem;      /* 160px */
  --dl-space-48:          12rem;      /* 192px */
  --dl-space-56:          14rem;      /* 224px */
  --dl-space-64:          16rem;      /* 256px */

  /* Layout-specific spacing */
  --dl-gutter:            var(--dl-space-6);       /* default column gutter */
  --dl-section-gap:       var(--dl-space-24);      /* between page sections */
  --dl-container-pad:     var(--dl-space-6);       /* container side padding */
}


/* ----------------------------------------------------------------------------
   4. LAYOUT - Grid & Breakpoints
   ---------------------------------------------------------------------------- */

:root {
  /* 4.1 Breakpoints (for reference - use in @media queries) */
  /* --dl-bp-xs:   0px     */
  /* --dl-bp-sm:   640px   */
  /* --dl-bp-md:   768px   */
  /* --dl-bp-lg:   1024px  */
  /* --dl-bp-xl:   1280px  */
  /* --dl-bp-2xl:  1536px  */

  /* 4.2 Container max-widths */
  --dl-container-sm:      640px;
  --dl-container-md:      768px;
  --dl-container-lg:      1024px;
  --dl-container-xl:      1280px;
  --dl-container-2xl:     1440px;

  /* 4.3 Grid */
  --dl-grid-columns:      12;
  --dl-grid-gutter:       var(--dl-space-6);

  /* 4.4 Aspect ratios */
  --dl-ratio-square:      1 / 1;
  --dl-ratio-landscape:   16 / 9;
  --dl-ratio-portrait:    3 / 4;
  --dl-ratio-photo:       4 / 3;
  --dl-ratio-wide:        21 / 9;
  --dl-ratio-golden:      1.618 / 1;
}


/* ----------------------------------------------------------------------------
   5. ELEVATION - Shadows
   Follows Apple HIG principle: shadows should feel natural, suggesting physical
   depth. Derwent expression: subtle, architectural, never heavy.
   ---------------------------------------------------------------------------- */

:root {
  --dl-shadow-none:       none;

  /* Subtle: cards, sections */
  --dl-shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.04);

  /* Default: raised cards, buttons */
  --dl-shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.06),
                          0 1px 2px rgba(0, 0, 0, 0.04);

  /* Medium: dropdowns, popovers */
  --dl-shadow-md:         0 4px 6px rgba(0, 0, 0, 0.05),
                          0 2px 4px rgba(0, 0, 0, 0.04);

  /* Large: modals, elevated panels */
  --dl-shadow-lg:         0 10px 15px rgba(0, 0, 0, 0.06),
                          0 4px 6px rgba(0, 0, 0, 0.04);

  /* XL: dialogs, command palettes */
  --dl-shadow-xl:         0 20px 25px rgba(0, 0, 0, 0.08),
                          0 8px 10px rgba(0, 0, 0, 0.04);

  /* 2XL: full-screen modals, overlays */
  --dl-shadow-2xl:        0 25px 50px rgba(0, 0, 0, 0.15);

  /* Inner shadow: pressed states, inset panels */
  --dl-shadow-inner:      inset 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Dark mode shadows - deeper, subtler */
[data-theme="dark"],
.dl-dark {
  --dl-shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.2);
  --dl-shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.3),
                          0 1px 2px rgba(0, 0, 0, 0.2);
  --dl-shadow-md:         0 4px 6px rgba(0, 0, 0, 0.25),
                          0 2px 4px rgba(0, 0, 0, 0.2);
  --dl-shadow-lg:         0 10px 15px rgba(0, 0, 0, 0.3),
                          0 4px 6px rgba(0, 0, 0, 0.2);
  --dl-shadow-xl:         0 20px 25px rgba(0, 0, 0, 0.35),
                          0 8px 10px rgba(0, 0, 0, 0.2);
  --dl-shadow-2xl:        0 25px 50px rgba(0, 0, 0, 0.5);
  --dl-shadow-inner:      inset 0 2px 4px rgba(0, 0, 0, 0.2);
}


/* ----------------------------------------------------------------------------
   6. BORDER RADIUS
   Derwent is architectural - predominantly sharp with selective softening.
   Not rounded like consumer apps. Precision corners, like building edges.
   ---------------------------------------------------------------------------- */

:root {
  --dl-radius-none:       0;
  --dl-radius-xs:         2px;
  --dl-radius-sm:         4px;
  --dl-radius-md:         6px;
  --dl-radius-lg:         8px;
  --dl-radius-xl:         12px;
  --dl-radius-2xl:        16px;
  --dl-radius-full:       9999px;

  /* Semantic aliases */
  --dl-radius-button:     var(--dl-radius-sm);
  --dl-radius-card:       var(--dl-radius-md);
  --dl-radius-input:      var(--dl-radius-sm);
  --dl-radius-modal:      var(--dl-radius-lg);
  --dl-radius-badge:      var(--dl-radius-full);
  --dl-radius-avatar:     var(--dl-radius-full);
}


/* ----------------------------------------------------------------------------
   7. MOTION - Transitions & Animation
   Apple HIG principle: motion should feel natural and purposeful.
   Derwent expression: measured, confident, never playful or bouncy.
   ---------------------------------------------------------------------------- */

:root {
  /* 7.1 Durations */
  --dl-duration-instant:  0ms;
  --dl-duration-micro:    100ms;      /* hover colour changes, opacity shifts */
  --dl-duration-fast:     150ms;      /* button press, toggle, checkbox */
  --dl-duration-normal:   250ms;      /* dropdown open, tooltip appear */
  --dl-duration-slow:     350ms;      /* modal enter, panel slide */
  --dl-duration-slower:   500ms;      /* page transitions, complex reveals */
  --dl-duration-slowest:  700ms;      /* hero animations, full-page overlays */

  /* 7.2 Easing curves
     Standard: for most transitions - confident, not mechanical
     Decelerate: for elements entering the viewport - arriving with purpose
     Accelerate: for elements leaving - departing without lingering */
  --dl-ease-standard:     cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --dl-ease-decelerate:   cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --dl-ease-accelerate:   cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --dl-ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1.0);

  /* 7.3 Common transition shorthands */
  --dl-transition-colors: color var(--dl-duration-micro) var(--dl-ease-standard),
                          background-color var(--dl-duration-micro) var(--dl-ease-standard),
                          border-color var(--dl-duration-micro) var(--dl-ease-standard);
  --dl-transition-opacity: opacity var(--dl-duration-fast) var(--dl-ease-standard);
  --dl-transition-transform: transform var(--dl-duration-normal) var(--dl-ease-decelerate);
  --dl-transition-shadow: box-shadow var(--dl-duration-fast) var(--dl-ease-standard);
  --dl-transition-all:    all var(--dl-duration-normal) var(--dl-ease-standard);
}

/* Reduced motion: honour user preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dl-duration-micro:    0ms;
    --dl-duration-fast:     0ms;
    --dl-duration-normal:   0ms;
    --dl-duration-slow:     0ms;
    --dl-duration-slower:   0ms;
    --dl-duration-slowest:  0ms;
  }
}


/* ----------------------------------------------------------------------------
   8. Z-INDEX - Layering scale
   ---------------------------------------------------------------------------- */

:root {
  --dl-z-base:            0;
  --dl-z-raised:          1;
  --dl-z-dropdown:        100;
  --dl-z-sticky:          200;
  --dl-z-header:          300;
  --dl-z-overlay:         400;
  --dl-z-modal:           500;
  --dl-z-popover:         600;
  --dl-z-toast:           700;
  --dl-z-tooltip:         800;
  --dl-z-max:             999;
}


/* ----------------------------------------------------------------------------
   9. OPACITY
   ---------------------------------------------------------------------------- */

:root {
  --dl-opacity-disabled:  0.4;
  --dl-opacity-placeholder: 0.5;
  --dl-opacity-secondary: 0.7;
  --dl-opacity-hover:     0.08;       /* for hover overlays on interactive elements */
  --dl-opacity-pressed:   0.12;       /* for pressed/active overlays */
  --dl-opacity-overlay:   0.5;        /* for backdrop overlays */
}


/* ----------------------------------------------------------------------------
   10. SIZING - Touch targets & components
   Apple HIG: minimum 44pt touch targets on mobile.
   ---------------------------------------------------------------------------- */

:root {
  /* Touch / click targets */
  --dl-target-min:        44px;       /* absolute minimum for touch */
  --dl-target-comfortable: 48px;     /* recommended touch target */

  /* Component sizing */
  --dl-size-icon-xs:      16px;
  --dl-size-icon-sm:      20px;
  --dl-size-icon-md:      24px;
  --dl-size-icon-lg:      32px;
  --dl-size-icon-xl:      48px;

  --dl-size-avatar-sm:    32px;
  --dl-size-avatar-md:    40px;
  --dl-size-avatar-lg:    56px;
  --dl-size-avatar-xl:    80px;

  /* Input heights */
  --dl-input-height-sm:   32px;
  --dl-input-height-md:   40px;
  --dl-input-height-lg:   48px;

  /* Button heights */
  --dl-button-height-sm:  32px;
  --dl-button-height-md:  40px;
  --dl-button-height-lg:  48px;

  /* Header heights */
  --dl-header-height:     64px;
  --dl-header-height-mobile: 56px;
}


/* ----------------------------------------------------------------------------
   11. BORDERS
   ---------------------------------------------------------------------------- */

:root {
  --dl-border-width-thin:   1px;
  --dl-border-width-medium: 2px;
  --dl-border-width-thick:  3px;

  --dl-border-style:        solid;
}


/* ----------------------------------------------------------------------------
   12. FOCUS - Accessibility
   Visible, clear focus indicators. Never remove - restyle.
   ---------------------------------------------------------------------------- */

:root {
  --dl-focus-ring-width:    2px;
  --dl-focus-ring-offset:   2px;
  --dl-focus-ring-color:    var(--dl-forest);
  --dl-focus-ring:          0 0 0 var(--dl-focus-ring-offset) var(--dl-surface-primary),
                            0 0 0 calc(var(--dl-focus-ring-offset) + var(--dl-focus-ring-width)) var(--dl-focus-ring-color);
}

[data-theme="dark"] {
  --dl-focus-ring-color:    var(--dl-white);  /* 21:1 on dark surfaces. Was sage (6:1 - marginal) */
}