/* ============================================================
   ClauSeal — Design Tokens
   Palette derived from Sobria Transition logo
   ============================================================ */

:root {
  /* --- Sobria Brand Palette --- */
  --c-primary:       #3EB55A;
  --c-primary-hover:  #35A04E;
  --c-primary-light:  #E8F5EC;
  --c-primary-lighter: rgba(81, 207, 82, 0.79);
  --c-primary-border: rgba(62,181,90,.25);

  --c-dark:          #1B4F6E;
  --c-dark-hover:    #164260;
  --c-dark-light:    #E6EEF3;

  --c-teal:          #3A8DB5;
  --c-teal-light:    #E3F0F6;

  --c-green-mid:     #48A870;
  --c-green-light:   #6DC88C;

  /* --- Semantic --- */
  --c-success:       #2E9E54;
  --c-success-light: #D4EDDA;
  --c-warning:       #D4A017;
  --c-warning-light: #FFF8E1;
  --c-danger:        #D43B3B;
  --c-danger-light:  #FDECEC;
  --c-info:          var(--c-teal);
  --c-info-light:    var(--c-teal-light);

  --c-ai:            var(--c-dark);
  --c-ai-light:      var(--c-dark-light);
  --c-prefill:       var(--c-green-mid);
  --c-prefill-light: #E0F4E8;
  --c-manual:        #7B8794;

  /* --- Backgrounds --- */
  --bg-app:          #F4F6F5;
  --bg-card:         #FFFFFF;
  --bg-muted:        #F7F9F8;
  --bg-hover:        #EFF3F0;
  --bg-selected:     var(--c-primary-light);
  --bg-sidebar:      #FFFFFF;
  --bg-chat:         var(--c-primary-lighter);
  --bg-chat-card:    #E3F2E8;
  --bg-dark:         #1E2D3A;

  /* --- Text --- */
  --text-primary:    #1A2B34;
  --text-secondary:  #5A6B73;
  --text-muted:      #94A3AB;
  --text-inverse:    #FFFFFF;
  --text-link:       var(--c-primary);
  --text-heading:    var(--c-dark);

  /* --- Borders --- */
  --border-light:    #E2E8E4;
  --border-medium:   #C8D1CB;
  --border-focus:    var(--c-primary);
  --border-chat:     rgba(62,181,90,.15);

  /* --- Spacing scale (4px) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

    /* --- Typography --- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-md:   1.125rem;   /* 18px */
    --text-lg:   1.25rem;    /* 20px */
    --text-xl:   1.5rem;     /* 24px */
    --text-2xl:  1.875rem;   /* 30px */
    --text-3xl:  2.25rem;    /* 36px */

    --leading-tight:  1.25;
    --leading-normal: 1.5;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semi:   600;
    --weight-bold:   700;

  /* --- Border Radius --- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs:  0 1px 2px rgba(26,43,52,.04);
  --shadow-sm:  0 1px 3px rgba(26,43,52,.06), 0 1px 2px rgba(26,43,52,.04);
  --shadow-md:  0 4px 8px -1px rgba(26,43,52,.07), 0 2px 4px -2px rgba(26,43,52,.04);
  --shadow-lg:  0 10px 20px -3px rgba(26,43,52,.08), 0 4px 8px -4px rgba(26,43,52,.04);
  --shadow-card:0 2px 8px rgba(26,43,52,.06);

  /* --- Transitions --- */
  --ease-default: cubic-bezier(.4,0,.2,1);
  --ease-bounce:  cubic-bezier(.34,1.56,.64,1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;

  /* --- Z-index --- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-sidebar:  250;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* --- Layout dimensions --- */
  --sidebar-w:  220px;
  --chat-w:     400px;
  --header-h:   56px;
  --footer-h:   48px;
  --card-h:     110px;
}