/* ============================================================
   Sonama — Design Tokens
   sonama.it / Frontera Ltd
   Last updated: April 2026
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     Brand — Blues
  ---------------------------------------------------------- */
  --brand-lightest:   #E8F3FD;
  --brand-lighter:    #BAD9F9;
  --brand-light:      #6DB3F2;
  --brand-primary:    #1E87E5;
  --brand-mid:        #1A6FBF;
  --brand-dark:       #03549B;
  --brand-darker:     #023D72;
  --brand-darkest:    #012549;

  /* ----------------------------------------------------------
     Neutrals
  ---------------------------------------------------------- */
  --grey-50:          #F5F5F5;
  --grey-100:         #E0E0E0;
  --grey-200:         #BDBDBD;
  --grey-300:         #9E9E9E;
  --grey-400:         #757575;
  --grey-500:         #4A4A4A;
  --grey-600:         #2E2E2E;
  --grey-700:         #1A1A1A;

  /* ----------------------------------------------------------
     Functional
  ---------------------------------------------------------- */
  --white:            #FFFFFF;
  --tint:             #F0F7FF;
  --black:            #000000;

  /* ----------------------------------------------------------
     Typography
  ---------------------------------------------------------- */
  --font-sans:        -apple-system, BlinkMacSystemFont, "Segoe UI",
                      Roboto, Helvetica, Arial, sans-serif,
                      "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono:        "SFMono-Regular", Consolas, "Liberation Mono",
                      Menlo, Courier, monospace;

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

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-bold:      700;

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

  /* ----------------------------------------------------------
     Spacing
  ---------------------------------------------------------- */
  --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-12:         3rem;       /* 48px */
  --space-16:         4rem;       /* 64px */
  --space-24:         6rem;       /* 96px */

  /* ----------------------------------------------------------
     Layout
  ---------------------------------------------------------- */
  --max-width:        1120px;
  --content-width:    720px;

  /* ----------------------------------------------------------
     Borders & Radius
  ---------------------------------------------------------- */
  --radius-sm:        4px;
  --radius-md:        8px;
  --radius-lg:        12px;
  --radius-xl:        16px;
  --radius-full:      9999px;

  --border-light:     1px solid var(--grey-100);
  --border-mid:       1px solid var(--grey-200);

  /* ----------------------------------------------------------
     Semantic — Surface & Text
     (the "touches of brilliance" live here —
      brand blue bleeds into surfaces intentionally)
  ---------------------------------------------------------- */
  --surface-page:     var(--white);
  --surface-tint:     var(--tint);
  --surface-raised:   var(--grey-50);
  --surface-accent:   var(--brand-lightest);

  --text-primary:     var(--grey-700);
  --text-secondary:   var(--grey-500);
  --text-muted:       var(--grey-400);
  --text-inverse:     var(--white);
  --text-accent:      var(--brand-primary);
  --text-accent-dark: var(--brand-dark);

  /* ----------------------------------------------------------
     Semantic — Interactive
  ---------------------------------------------------------- */
  --action-default:   var(--brand-primary);
  --action-hover:     var(--brand-mid);
  --action-active:    var(--brand-dark);
  --action-subtle:    var(--brand-lightest);
  --action-subtle-hover: var(--brand-lighter);

  /* ----------------------------------------------------------
     Transitions
  ---------------------------------------------------------- */
  --transition-fast:  150ms ease;
  --transition-base:  250ms ease;

}