/* ==========================================================================
   Design Tokens – The Break Estate
   ==========================================================================
   Single source of truth for all visual properties.
   Change a value here and it propagates everywhere.
   ========================================================================== */

:root {
  /* --- Palette --- */
  --color-bg:              #0d0507;
  --color-text:            #c4bdb1;
  --color-text-muted:      rgba(228, 222, 212, 0.5);
  --color-border:          rgba(228, 222, 212, 0.18);
  --color-border-hover:    rgba(228, 222, 212, 0.32);
  --color-border-focus:    rgba(228, 222, 212, 0.5);
  --color-input-bg:        rgba(228, 222, 212, 0.025);
  --color-input-bg-focus:  rgba(228, 222, 212, 0.06);
  --color-accent:          #c4bdb1;
  --color-error:           #c44;
  --color-success:         #4a7;

  /* --- Typography --- */
  --font-body:     'Sabon', Georgia, 'Times New Roman', serif;
  --font-display:  'Cochin', Georgia, serif;
  --font-label:    'Sabon', Georgia, 'Times New Roman', serif, var(--font-body);

  --text-base:     1rem;
  --text-sm:       0.875rem;
  --text-xs:       0.8125rem;
  --text-lg:       1.125rem;
  --text-xl:       1.375rem;
  --text-2xl:      1.55rem;

  --leading-tight:  1.25;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* --- Spacing --- */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;

  /* --- Form inputs --- */
  --input-border-width:    1px;
  --input-border-color:    var(--color-border);
  --input-radius:          0;
  --input-padding-x:       0.75rem;
  --input-padding-y:       0.625rem;
  --input-font-size:       var(--text-base);
  --input-bg:              var(--color-input-bg);
  --input-bg-focus:        var(--color-input-bg-focus);
  --input-color:           rgba(228, 222, 212, 0.75);

  --field-gap:             3rem;

  /* --- Labels --- */
  --label-font-family:     var(--font-label);
  --label-font-size:       1rem;
  --label-font-weight:     400;
  --label-letter-spacing:  0em;
  --label-text-transform:  normal;
  --label-margin-bottom:   0.5rem;
  --label-color:           #bbb6af;

  /* --- Descriptions --- */
  --desc-font-size:        var(--text-xs);
  --desc-color:            var(--color-text-muted);
  --desc-margin-top:       0.375rem;

  /* --- Buttons --- */
  --btn-padding-x:         2.5rem;
  --btn-padding-y:         0.75rem;
  --btn-font-family:       "Sackers Gothic";
  --btn-font-size:         var(--label-font-size);
  --btn-letter-spacing:    0.2em;
  --btn-radius:            0;
  --btn-border-width:      1px;

  /* --- Transitions --- */
  --ease-out:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:    cubic-bezier(0.42, 0, 0.58, 1);
  --transition-fast:  150ms var(--ease-out);
  --transition-base:  250ms var(--ease-out);
  --transition-slow:  400ms var(--ease-in-out);

  /* --- Z-index layers --- */
  --z-dropdown: 100;
  --z-calendar: 100;
  --z-overlay:  200;

  /* -----------------------------------------------------------------
     DreamForm plugin token overrides
     These map our tokens into the plugin's --df-* namespace so
     existing plugin CSS inherits our theme automatically.
     ----------------------------------------------------------------- */
  --df-border-color:     var(--color-border);
  --df-border-radius:    var(--input-radius);
  --df-border-radius-lg: var(--input-radius);
  --df-gap:              var(--space-sm);
  --df-gap-lg:           var(--space-md);
  --df-accent:           var(--color-accent);
  --df-transition:       var(--transition-base);
  --df-font-size-sm:     var(--text-sm);
  --df-bg:               var(--input-bg);
  --df-text-color:       var(--color-text);
  --df-focus-color:      var(--color-border-focus);
  --df-padding-sm:       var(--input-padding-y) var(--input-padding-x);
  --df-radius:           var(--input-radius);
}

/* --- Mobile type scale --- */
@media (max-width: 640px) {
  :root {
    --text-2xl:  1.105rem;
    --text-xl:   1.125rem;
    --text-lg:   1rem;
    --text-base: 0.875rem;
    --text-sm:   12.6px;
  }
}