/* ===========================================================================
   Optimus High Tech — Color tokens
   Base palette extracted from the brand Figma (see fig-tokens.css for raw vars).
   This file adds the semantic + gradient layer the products actually consume.
   =========================================================================== */

:root {
  /* --- Brand blues (Optimus Casa core) ------------------------------------ */
  --blue-900: #06091E;   /* near-black navy (logo base, deep bg)            */
  --blue-800: #052C6A;   /* deep navy (gradient end)                        */
  --blue-700: #183159;   /* Azul Optimus — primary brand navy              */
  --blue-600: #175FCF;   /* Azul3 — primary action blue                    */
  --blue-500: #3884FA;   /* bright blue (gradient start)                   */
  --blue-400: #6391E5;   /* periwinkle blue                                */
  --blue-300: #AFDDFF;   /* azul claro                                     */
  --blue-200: #AADBFF;   /* light gradient stop                            */
  --blue-100: #E8F5FF;   /* Blanquito — palest blue surface                */
  --cyan-500: #02BDFF;   /* azul brillante — energetic accent              */

  /* --- Brand red (logo / alerts / Access accent) -------------------------- */
  --red-700:  #B22334;   /* access dark red                                */
  --red-600:  #D8043C;   /* deep red gradient stop                         */
  --red-500:  #DB2E43;   /* Color — signature brand red (logo)             */
  --red-400:  #F23B6B;   /* rojo oscuro                                    */
  --red-300:  #FF6871;   /* rojo claro                                     */
  --red-200:  #FF838B;   /* soft red                                       */

  /* --- Support hues -------------------------------------------------------- */
  --orange-500: #FF912B; /* naranja                                        */
  --yellow-300: #F6E680; /* amarillo                                       */
  --green-500:  #2FB2AB; /* verde oscuro                                   */
  --green-300:  #54F1AF; /* verde claro                                    */
  --violet-500: #4B71FA; /* violeta                                        */

  /* --- Neutrals (Optimus Access greys) ------------------------------------ */
  --ink-900: #06091E;
  --ink-800: #1A1B2B;
  --ink-700: #3B3A4A;   /* access-1                                        */
  --ink-500: #7E7F8E;
  --ink-400: #949494;   /* gris                                           */
  --ink-300: #C0C0C8;   /* access-2                                        */
  --ink-200: #DCE2EC;
  --ink-100: #EEF2F7;
  --ink-50:  #F6F8FB;
  --white:   #FFFFFF;

  /* --- Tinted surfaces ----------------------------------------------------- */
  --tapete: rgba(23, 95, 207, 0.08);  /* signature subtle blue wash         */

  /* =========================================================================
     SEMANTIC ALIASES — prefer these in product code
     ========================================================================= */
  --brand-primary:  var(--blue-700);   /* navy — logotype, headers          */
  --brand-action:   var(--blue-600);   /* primary buttons, links            */
  --brand-action-hover: #1252B4;
  --brand-accent:   var(--red-500);    /* highlights, the Optimus red        */
  --brand-cyan:     var(--cyan-500);

  --bg-page:        var(--ink-50);
  --bg-canvas:      #FFFFFF;
  --surface-card:   #FFFFFF;
  --surface-muted:  var(--ink-100);
  --surface-tint:   var(--tapete);
  --surface-inverse: var(--blue-700);

  --text-primary:   var(--blue-900);
  --text-secondary: var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-on-brand:  #FFFFFF;
  --text-link:      var(--blue-600);

  --border-subtle:  var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-focus:   var(--blue-500);

  --status-success: var(--green-500);
  --status-info:    var(--blue-600);
  --status-warning: var(--orange-500);
  --status-danger:  var(--red-500);

  --focus-ring: 0 0 0 3px rgba(56, 132, 250, 0.35);

  /* =========================================================================
     SIGNATURE GRADIENTS — the brand's defining visual device
     ========================================================================= */
  --grad-blue:       linear-gradient(180deg, #3884FA 0%, #052C6A 100%); /* @kind color */
  --grad-cyan:       linear-gradient(180deg, #02BDFF 0%, #175FCF 100%); /* @kind color */
  --grad-light:      linear-gradient(180deg, #E8F5FF 0%, #AADBFF 100%); /* @kind color */
  --grad-orange:     linear-gradient(180deg, #F6E680 0%, #FF912B 100%); /* @kind color */
  --grad-red:        linear-gradient(180deg, #FF636C 0%, #D8043C 100%); /* @kind color */
  --grad-periwinkle: linear-gradient(180deg, #8BB1F5 0%, #0D59D6 100%); /* @kind color */
  --grad-gray:       linear-gradient(180deg, #C0C0C8 0%, #3B3A4A 100%); /* @kind color */
  --grad-logo:       linear-gradient(180deg, #DB2E43 0%, #06091E 100%); /* @kind color */
  --grad-hero:       linear-gradient(155deg, #183159 0%, #06091E 70%); /* @kind color */
}

/* Optimus Access product scope — neutral/secure theme, dark-red accent */
[data-product="access"] {
  --brand-primary: var(--blue-700);
  --brand-action:  var(--ink-700);
  --brand-accent:  var(--red-700);
  --bg-page:       var(--ink-100);
}