/*
Theme Name: AI Frame
Theme URI: https://aiframe.es
Author: Tu Nombre
Author URI: https://aiframe.es
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: AIFrame
*/


:root {
    --size-4: .25rem;
    --size-8: .5rem;
    --size-12: .75rem;
    --size-14: .875rem;
    --size-16: 1rem;
    --size-20: 1.25rem;
    --size-24: 1.50rem;
    --size-32: 2rem;
    --size-48: 3rem;
    --size-64: 4rem;

    --color-overlay: 1,1,1;
}

/* Colors
============================*/

  :root {
    /* === Base Layout === */
    --color-body-bg: #161616;        /* Fondo principal (body) */
    --color-body-secondary-bg: #232323;
    --color-surface: #232323;        /* Cards / Panels */
    --color-surface-alt: #1c1c1c;    /* Panel secundario / Sidebar */
    --color-border: #213050;         /* Bordes sutiles */
    --color-button: #3e3e3e;
    --color-button-hover: #343434;
    /* === Tipografía === */
    --color-text-primary: #E6EAF2;   /* Texto principal */
    --color-text-secondary: #A9B1C6; /* Texto secundario */
    --color-text-muted: #7C859F;   /* Texto deshabilitado */
    --color-text-accent: #635bff;  
    --color-text-accent-secondary: #635bff;
    --color-text-white: #FFFFFF;

    --color-text-post: #9FA1A5;

    --color-link: #2598ef;
    --color-link-hover: #1d76ba;

    /* === Marca / Glow principal === */
    --color-primary: #00E0FF;        /* Azul neón (elementos activos) */
    --color-primary-hover: #00B8D4;  
    --color-primary-soft: rgba(0, 224, 255, 0.15); /* Fondo botones ghost */

    /* === Indicadores tipo barra (como en la imagen) === */
    --color-success: #037029;        /* Verde neón */
    --color-warning: #FFC857;        /* Amarillo */
    --color-orange: #FF8C42;         /* Naranja */
    --color-danger: #FF4D6D;         /* Rojo */
    --color-info: #1867c7;           /* Azul brillante alternativo */

    /* === Estados UI === */
    --color-hover: #3A4260;
    --color-active: #1F2538;
    --color-focus-ring: rgba(0, 224, 255, 0.4);

    /* === Sombras / Glow === */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.4);
    --glow-primary: 0 0 10px rgba(0, 224, 255, 0.6);
  }

/* Fonts
============================*/

  /* Poppins - Thin 100 */
  @font-face {
      font-family: 'Poppins';
      src: url('./fonts/Poppins-Thin.ttf') format('truetype');
      font-weight: 100;
      font-style: normal;
      font-display: swap;
  }

  /* Poppins - Extra Light 200 */
  @font-face {
      font-family: 'Poppins';
      src: url('./fonts/Poppins-ExtraLight.ttf') format('truetype');
      font-weight: 200;
      font-style: normal;
      font-display: swap;
  }

  /* Poppins - Light 300 */
  @font-face {
      font-family: 'Poppins';
      src: url('./fonts/Poppins-Light.ttf') format('truetype');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
  }

  /* Poppins - Regular 400 */
  @font-face {
      font-family: 'Poppins';
      src: url('./fonts/Poppins-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
  }

  /* Poppins - Medium 500 */
  @font-face {
      font-family: 'Poppins';
      src: url('./fonts/Poppins-Medium.ttf') format('truetype');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
  }

  /* Poppins - SemiBold 600 */
  @font-face {
      font-family: 'Poppins';
      src: url('./fonts/Poppins-SemiBold.ttf') format('truetype');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
  }

  /* Poppins - Bold 700 */
  @font-face {
      font-family: 'Poppins';
      src: url('./fonts/Poppins-Bold.ttf') format('truetype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
  }

  /* Poppins - Extra Bold 800 */
  @font-face {
      font-family: 'Poppins';
      src: url('./fonts/Poppins-ExtraBold.ttf') format('truetype');
      font-weight: 800;
      font-style: normal;
      font-display: swap;
  }

  /* Poppins - Black 900 */
  @font-face {
      font-family: 'Poppins';
      src: url('./fonts/Poppins-Black.ttf') format('truetype');
      font-weight: 900;
      font-style: normal;
      font-display: swap;
  }


  /* Inter */
  @font-face {
    font-family: 'Inter';
    src: url('./fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
  }


/* Resets Base
============================*/

    *, *::before, *::after { 
        box-sizing: border-box; 
    }

    body {
        margin: 0;
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
    }

    a {
        text-decoration: none;
    }

/* Resets Custom
============================*/

    .reset-button {
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
    }

    .reset-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

/* Utils
============================*/

    .vertical-separator {
        display: block;
        width: 1px;
        height: var(--size-32);
        background-color: var(--color-border);
    }

/* Plugins - Enlighter
----------------------------------- */

    .enlighter-tooltip,
    .enlighter-btn-window,
    .enlighter-btn-website {
        display: none !important;
    }

    .enlighter-btn {
        background-image: none !important;
    }

    .enlighter-toolbar .enlighter-btn-raw:after {
        content: 'Raw' !important;
    }

    .enlighter-toolbar .enlighter-btn-copy:after {
        content: 'Copiar' !important;
    } 

    .enlighter-t-beyond .enlighter-btn {
        padding: 3px 5px 3px 5px !important;
        margin: 0 5px 0 5px !important;
        width: auto !important;
    }

    .enlighter-t-beyond, .enlighter-t-beyond * {
		color: var(--color-text-secondary) !important;
		background-color: var(--color-surface) !important;
		border-color: var(--color-surface) !important;
	}